Autocomplete is now visible in frontendgit add -A. Crying out of joy from the inside

app/static/js/app.js

@@ -161,41 +161,53 @@ $(document).ready(function()
 // Autocomplete for search - Contact Joca in case of trouble
 // Check: Code doesn't work inside document.ready function
 // Are the other functions correctly closed?
-
-// Send query to server
-$('#search').on("input", function() {
-  var query = this.value;
-
-  $.ajax({
-    url: "/autocomplete_suggestions",
-    data: $('form').serialize(),
-    type: "POST",
-    async: false,
-    success: function(response) {
-      //console.log("Got your query!");
+  function split( val ) {
+    return val.split( /,\s*/ );
+  }
+  function extractLast( term ) {
+    return split( term ).pop();
   }
 
+  $( "#search" )
+    // don't navigate away from the field on tab when selecting an item
+    .on( "keydown", function( event ) {
+      if ( event.keyCode === $.ui.keyCode.TAB &&
+          $( this ).autocomplete( "instance" ).menu.active ) {
+        event.preventDefault();
+      }
+    })
+    .autocomplete({
+      source:function(request, response) {
+          $.getJSON("/autocomplete_suggestions",{
+              q: request.term, // in flask, "q" will be the argument to look for using request.args
+          }, function(data) {
+              response(data); // matching_results from jsonify
+              console.log("this" + data);
           });
-
-  var JSONItems = ['battle'];
-  $.getJSON( "/autocomplete_suggestions", callbackFuncWithData);
-
-
-
-function callbackFuncWithData() {
-
-$("#search").autocomplete({
-  source: function( request, response ) {
-          $.getJSON( "autocomplete_suggestions", {
-            term: extractLast( request.term )
-          }, response );
+      },
+      search: function() {
+        // custom minLength
+        var term = extractLast( this.value );
+        if ( term.length < 2 ) {
+          return false;
         }
-});
-}
-
-
-});
-
-
-// Get autocomplete_suggestions
-console.log("haha");
+      },
+      focus: function() {
+        // prevent value inserted on focus
+        return false;
+      },
+      select: function( event, ui ) {
+        console.log(this.value);
+        str = this.value;
+        var terms = str.split(" ");
+        console.log(terms);
+        // remove the current input
+        terms.pop();
+        // add the selected item
+        terms.push( ui.item.value );
+        // add placeholder to get the comma-and-space at the end
+        terms.push( "" );
+        this.value = terms.join( " " );
+        return false;
+      }
+    });

app/views.py

@@ -441,8 +441,9 @@ autocomplete.load() #Train markov model once, for autocomplete in search
 
 @app.route('/autocomplete_suggestions', methods=['GET', 'POST'])
 def autocomplete_search():
-    if request.method == 'POST':
-        query = request.form['search']
+    if request.method == 'GET':
+        #query = request.form['search']
+        query = request.args.get('q')
         query_tokenized = query.lower().split()
         print(query_tokenized)
         word_1 = query_tokenized[-2]
@@ -458,7 +459,8 @@ def autocomplete_search():
 
         print(session['autocomplete_suggestions'])
 
-    return Response(json.dumps(session['autocomplete_suggestions']), mimetype='application/json')
+    return Response(json.dumps(autocomplete_suggestions), mimetype='application/json')
+
 
 ## STACKS!