Autocomplete for search on the books page. Code is functional, prints to console now. Need to fix the css on the front end still Required libraries added to the pip requirements file.

app/static/js/app.js

@@ -157,3 +157,99 @@ $(document).ready(function()
     }
 
 );
+
+// Autocomplete for search - Contact Joca in case of trouble
+
+$('#search').on("input", function() {
+  var query = this.value;
+
+
+  $.ajax({
+    url: "/autocomplete_suggestions",
+    data: $('form').serialize(),
+    type: "POST",
+    success: function(response) {
+      //console.log("Got your query!");
+    }
+  });
+
+  function getData() {
+    var deferredData = new jQuery.Deferred();
+
+    $.ajax({
+      type: "GET",
+      url: "/autocomplete_suggestions",
+      dataType: "json",
+      success: function(data) {
+        deferredData.resolve(data);
+      }
+    });
+    return deferredData; // contains the passed data
+  };
+
+    var dataDeferred = getData();
+
+  $.when(dataDeferred).done( function( data ) {
+    var suggestion_list = data;
+    console.log(suggestion_list);
+    $().ready(function() {
+        // search only, if the regexp matches
+        var suggestions = data;
+
+        // Defines for the example the match to take which is any word (with Umlauts!!).
+        function _leftMatch(string, area) {
+            //return string.substring(0, area.selectionStart).match(/[\wäöüÄÖÜß]+$/)
+            //console.log(string.substring(string.lastIndexOf(" ")+1).match(/[\wäöüÄÖÜß]+$/))
+            return string.substring(string.lastIndexOf(" ")+1).match(/[\wäöüÄÖÜß]+$/)
+
+        }
+
+        function _setCursorPosition(area, pos) {
+            if (area.setSelectionRange) {
+                area.setSelectionRange(pos, pos);
+            } else if (area.createTextRange) {
+                var range = area.createTextRange();
+                range.collapse(true);
+                range.moveEnd('character', pos);
+                range.moveStart('character', pos);
+                range.select();
+            }
+        }
+
+
+
+        $("#search").autocomplete({
+            position: { my : "right top", at: "right bottom" },
+            source: function(request, response) {
+                var str = _leftMatch(request.term, $("#search")[0]);
+                str = (str != null) ? str[0] : "";
+                console.log(str);
+                response($.ui.autocomplete.filter(
+                        suggestions, str));
+            },
+            minLength: 1,  // does have no effect, regexpression is used instead
+            focus: function() {
+                // prevent value inserted on focus
+                return false;
+            },
+            // Insert the match inside the ui element at the current position by replacing the matching substring
+            select: function(event, ui) {
+                //alert("completing "+ui.item.value);},
+                var m = _leftMatch(this.value, this)[0];
+                var beg = this.value.substring(0, this.selectionStart - m.length);
+                this.value = beg + ui.item.value + this.value.substring(this.selectionStart, this.value.length);
+                var pos = beg.length + ui.item.value.length;
+                _setCursorPosition(this, pos);
+                return false;
+            },
+            search:function(event, ui) {
+                var m = _leftMatch(this.value, this);
+                return (m != null )
+            }
+
+        });
+    })
+
+  });
+
+});

app/views.py

@@ -6,7 +6,7 @@ This file creates your application.
 """
 
 from app import app, db, socketio, DOMAIN
-from flask import Flask, render_template, request, redirect, url_for, flash, send_from_directory, jsonify, abort
+from flask import Flask, Response, render_template, request, redirect, url_for, flash, send_from_directory, jsonify, abort
 import json
 from  sqlalchemy.sql.expression import func, select
 from app.forms import UploadForm, EditForm, SearchForm, ChatForm
@@ -16,6 +16,8 @@ from os import environ
 from flask_socketio import SocketIO, emit
 import datetime
 import time
+import autocomplete
+import sys
 
 import os
 from werkzeug.utils import secure_filename
@@ -308,6 +310,28 @@ def search_results(searchtype, query):
 
     return render_template('results.html', form=search, books=results, books_all=random_order, searchtype=search.select.data, query=query)
 
+## Search - autocomplete
+autocomplete_suggestions = []
+
+@app.route('/autocomplete_suggestions', methods=['GET', 'POST'])
+def test1():
+    if request.method == 'POST':
+        autocomplete.load()
+        query = request.form['search']
+        query_tokenized = query.lower().split()
+        print(query_tokenized)
+        word_1 = query_tokenized[-2]
+        word_2 = query_tokenized[-1]
+        #print(word_1)
+        autocomplete_output = autocomplete.predict(word_1 , word_2)
+        autocomplete_suggestions.clear()
+        for suggestion, score in autocomplete_output:
+            autocomplete_suggestions.append(suggestion)
+
+        print(autocomplete_suggestions)
+
+    return Response(json.dumps(autocomplete_suggestions), mimetype='application/json')
+
 
 ###
 # The API

requirements.txt

@@ -16,4 +16,6 @@ WTForms==2.1
 flask-marshmallow==0.9.0
 Wand==0.4.4
 PyPDF2==1.26.0
+autocomplete==0.0.104
+