glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

working version of autocomplete that includes the new typeahead.js syntax. So much more complicated than before...

Browse source
This commit is contained in:
Devin Howard 2015-10-02 13:36:51 +08:00
parent 14eeb0cbe6
commit a51777b0ba
2 changed files with 59 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
app/assets/javascripts/src/Metamaps.js
View file

@ -664,6 +664,15 @@ Metamaps.Create = {
Metamaps.Create.newTopic.name = $(this).val();
});
var topicBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/topics/autocomplete_topic?term=%QUERY',
wildcard: '%QUERY',
},
});
// initialize the autocomplete results for the metacode spinner
$('#topic_name').typeahead(
{
@ -672,20 +681,18 @@ Metamaps.Create = {
[{
name: 'topic_autocomplete',
limit: 8,
template: Hogan.compile($('#topicAutocompleteTemplate').html()),
source: function(query, syncResults, asyncResults) {
syncResults([]); //we don't got none
var url = '/topics/autocomplete_topic?term=' + query;
$.ajax(url, {
success: function(data) { asyncResults(data); },
error: function() { asyncResults([]); },
});
display: function (s) { return s.label; },
templates: {
suggestion: function(s) {
return Hogan.compile($('#topicAutocompleteTemplate').html()).render(s);
},
},
source: topicBloodhound,
}]
);
// tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
$('#topic_name').bind('typeahead:selected', function (event, datum, dataset) {
$('#topic_name').bind('typeahead:select', function (event, datum, dataset) {
Metamaps.Topic.getTopicFromAutocomplete(datum.id);
});
@ -718,7 +725,7 @@ Metamaps.Create = {
},
hide: function () {
$('#new_topic').fadeOut('fast');
$("#topic_name").typeahead('setQuery', '');
$("#topic_name").typeahead('val', '');
Metamaps.Create.newTopic.beingCreated = false;
}
},
@ -730,6 +737,31 @@ Metamaps.Create = {
Metamaps.Create.newSynapse.description = $(this).val();
});
var synapseBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/synapses?term=%QUERY',
wildcard: '%QUERY',
},
});
var existingSynapseBloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2',
prepare: function(query, settings) {
var self = Metamaps.Create.newSynapse;
if (Metamaps.Selected.Nodes.length < 2) {
var url = '/search/synapses?topic1id=' + self.topic1id + '&topic2id=' + self.topic2id;
}
console.log(query);
console.log(settings);
return settings;
},
},
});
// initialize the autocomplete results for synapse creation
$('#synapse_desc').typeahead(
{
@ -737,39 +769,29 @@ Metamaps.Create = {
},
[{
name: 'synapse_autocomplete',
template: Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>"),
source: function(query, syncResults, asyncResults) {
syncResults([]); //we don't got none
var url = '/search/synapses?term=' + query;
$.ajax(url, {
success: function(data) { asyncResults(data); },
error: function() { asyncResults([]); },
});
display: function(s) { return s.label; },
templates: {
suggestion: function(s) {
return Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>").render(s);
},
},
source: synapseBloodhound,
},
{
name: 'existing_synapses',
limit: 50,
template: Hogan.compile($('#synapseAutocompleteTemplate').html()),
source: function(query, syncResults, asyncResults) {
syncResults([]); //we don't got none
var self = Metamaps.Create.newSynapse;
if (Metamaps.Selected.Nodes.length < 2) {
var url = '/search/synapses?topic1id=' + self.topic1id + '&topic2id=' + self.topic2id;
$.ajax(url, {
success: function(data) { asyncResults(data); },
error: function() { asyncResults([]); },
});
} else {
asyncResults([]);
}
display: function(s) { return s.label; },
templates: {
suggestion: function(s) {
return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s);
},
header: "<h3>Existing synapses</h3>"
},
header: "<h3>Existing synapses</h3>"
source: existingSynapseBloodhound,
}]
);
$('#synapse_desc').bind('typeahead:selected', function (event, datum, dataset) {
$('#synapse_desc').bind('typeahead:select', function (event, datum, dataset) {
if (datum.id) { // if they clicked on an existing synapse get it
Metamaps.Synapse.getSynapseFromAutocomplete(datum.id);
}
@ -792,7 +814,7 @@ Metamaps.Create = {
},
hide: function () {
$('#new_synapse').fadeOut('fast');
$("#synapse_desc").typeahead('setQuery', '');
$("#synapse_desc").typeahead('val', '');
Metamaps.Create.newSynapse.beingCreated = false;
Metamaps.Create.newTopic.addSynapse = false;
Metamaps.Create.newSynapse.topic1id = 0;

2
app/views/layouts/_templates.html.erb
View file

@ -196,6 +196,7 @@
</script>
<script type="text/template" id="topicAutocompleteTemplate">
<div>
<img class="autocompleteSection topicType" width="24" height="24" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
<p class="autocompleteSection topicTitle">{{label}}</p>
<div class="expandTopicMetadata"></div>
@ -209,6 +210,7 @@
<div class="topicPermission {{permission}}"></div>
</div>
<div class="clearfloat"></div>
</div>
</script>