From 720e8d84690379e74088aa94e92002b4ef510c75 Mon Sep 17 00:00:00 2001
From: Jocavdh <joca@madebyjoca.com>
Date: Sun, 3 Jun 2018 16:36:43 +0200
Subject: [PATCH] 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 | 96 ++++++++++++++++++++++++++++++++++++++++++++
 app/views.py         | 26 +++++++++++-
 requirements.txt     |  2 +
 3 files changed, 123 insertions(+), 1 deletion(-)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index 5236b0f..460c9ee 100755
--- a/app/static/js/app.js
+++ b/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 )
+            }
+
+        });
+    })
+
+  });
+
+});
diff --git a/app/views.py b/app/views.py
index ba0c01c..768342a 100755
--- a/app/views.py
+++ b/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
diff --git a/requirements.txt b/requirements.txt
index a4faeb4..4af1a1c 100755
--- a/requirements.txt
+++ b/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
+