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

app/assets/javascripts/src/Metamaps.js

@@ -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()),
+                    display: function (s) { return s.label; },
-                    source: function(query, syncResults, asyncResults) {
+                    templates: {
-                      syncResults([]); //we don't got none
+                        suggestion: function(s) {
-                      var url = '/topics/autocomplete_topic?term=' + query;
+                            return Hogan.compile($('#topicAutocompleteTemplate').html()).render(s);
-                      $.ajax(url, {
+                        },
-                        success: function(data) { asyncResults(data); },
-                        error: function() { asyncResults([]); },
-                      });
                     },
+                    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>"),
+                    display: function(s) { return s.label; },
-                    source: function(query, syncResults, asyncResults) {
+                    templates: {
-                      syncResults([]); //we don't got none
+                        suggestion: function(s) { 
-                      var url = '/search/synapses?term=' + query;
+                            return Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>").render(s);
-                      $.ajax(url, {
+                        },
-                        success: function(data) { asyncResults(data); },
-                        error: function() { asyncResults([]); },
-                      });
                     },
+                    source: synapseBloodhound,
                 },
                 {
                     name: 'existing_synapses',
                     limit: 50,
-                    template: Hogan.compile($('#synapseAutocompleteTemplate').html()),
+                    display: function(s) { return s.label; },
-                    source: function(query, syncResults, asyncResults) {
+                    templates: {
-                      syncResults([]); //we don't got none
+                        suggestion: function(s) {
-                      var self = Metamaps.Create.newSynapse;
+                            return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s);
-
+                        },
-                      if (Metamaps.Selected.Nodes.length < 2) {
+                        header: "<h3>Existing synapses</h3>"
-                        var url = '/search/synapses?topic1id=' + self.topic1id + '&topic2id=' + self.topic2id;
-                        $.ajax(url, {
-                          success: function(data) { asyncResults(data); },
-                          error: function() { asyncResults([]); },
-                        });
-                      } else {
-                        asyncResults([]);
-                      }
                     },
-                    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;

app/views/layouts/_templates.html.erb

@@ -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>