Add term/lang suggestions to add_term form

Using some shitty jQuery. Not very nice but enough to close #24.
dellsystem · Jul 9, 2017 · ed598c3 · ed598c3
1 parent d5adeca
commit ed598c3
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 2 deletions.
diff --git a/bookmarker/urls.py b/bookmarker/urls.py
@@ -52,6 +52,7 @@
     url(r'^author/(?P<author_id>\d+)$', bookmarker.views.view_author,
         name='view_author'),
     url(r'^stats', bookmarker.views.view_stats, name='view_stats'),
+    url(r'^api/suggest.json$', bookmarker.views.suggest_terms),
     url(r'^api/define.json$', bookmarker.views.get_definition),
     url(r'^search$', bookmarker.views.search, name='search'),
 ]
diff --git a/bookmarker/views.py b/bookmarker/views.py
@@ -246,6 +246,20 @@ def add_book(request):
     return redirect(book)
 
 
+def suggest_terms(request):
+    term = request.GET.get('term')
+
+    # Find terms of all languages that start with these characters.
+    if term and len(term) >= 3:
+        terms = Term.objects.filter(text__startswith=term).values(
+            'text', 'language'
+        )
+
+    return JsonResponse({
+        'terms': list(terms)[:5],
+    })
+
+
 def get_definition(request):
     term = request.GET.get('term', '')
     language = request.GET.get('language', 'en')

diff --git a/static/scripts.js b/static/scripts.js
@@ -1,3 +1,52 @@
+function suggestTerms() {
+    var term = document.getElementById('id_term-text').value;
+    var url = '/api/suggest.json?term=' + term;
+
+    if (term.length >= 3) {
+        fetch(url).then(
+            function (response) {
+                return response.json();
+            }
+        ).then(
+            function (data) {
+                var terms = data.terms;
+                var row;
+                var labels = [];
+
+                if (terms.length) {
+                    for (var i = 0; i < terms.length; i++) {
+                        row = terms[i];
+                        labels.push(
+                            '<div class="item">' + row.text + ' - ' +
+                            row.language + '</div>'
+                        );
+                    }
+                    $('#suggested-terms').html(labels.join(''));
+                    $('#suggested-terms').show();
+                } else {
+                    $('#suggested-terms').html('');
+                }
+            }
+        )
+    } else {
+        $('#suggested-terms').html('');
+    }
+}
+
+$('#suggested-terms').on('click', '.item', function() {
+    var details = $(this).text().split(' - ');
+    var lang = details[1];  // may not always work lol
+    var term = details[0];
+
+    $('#id_term-text').val(term);
+    $('#id_term-language').val(lang);
+
+    $('#suggested-terms').html('');
+    $('#suggested-terms').hide();
+    fetchDefinition();
+});
+
+
 function fetchDefinition() {
     var term = document.getElementById('id_term-text').value;
     var language = document.getElementById('id_term-language').value;
@@ -32,6 +81,8 @@ function fetchDefinition() {
             linkButton.className = 'ui disabled button';
             occurrencesCount.innerText = '';
         }
+        $('#suggested-terms').hide();
+        $('#suggested-terms').html('');
     });
 }
 

diff --git a/templates/add_term.html b/templates/add_term.html
@@ -59,8 +59,14 @@ <h3>
         <div class="ui fields">
             {% with error=term_form.text.errors %}
             <div class="eight wide {% if error %}error{% endif %} field">
-                <label>Term{% if error %} (REQUIRED){% endif %}</label>
+                <label>
+                    Term{% if error %} (REQUIRED){% endif %}
+                </label>
                 {{ term_form.text }}
+                <div class="ui dropdown">
+                    <div class="ui compact menu" id="suggested-terms">
+                    </div>
+                </div>
             </div>
             {% endwith %}
             {% with error=term_form.language.errors %}

diff --git a/vocab/forms.py b/vocab/forms.py
@@ -9,7 +9,12 @@ class Meta:
         model = Term
         fields = ['text', 'definition', 'language', 'highlights']
         widgets = {
-            'text': forms.TextInput(attrs={'autofocus': 'autofocus'}),
+            'text': forms.TextInput(
+                attrs={
+                    'autofocus': 'autofocus',
+                    'onkeypress': 'suggestTerms()',
+                }
+            ),
             'definition': forms.Textarea(attrs={'rows': 4}),
             'highlights': forms.Textarea(attrs={'rows': 4}),
         }