Adding search auto-complete #280

InvenTree/InvenTree/urls.py

@@ -37,7 +37,7 @@ from django.views.generic.base import RedirectView
 from rest_framework.documentation import include_docs_urls
 
 from .views import auth_request
-from .views import IndexView, SearchView, DatabaseStatsView
+from .views import IndexView, SearchView, SearchResultView, DatabaseStatsView
 from .views import SettingsView, EditUserView, SetPasswordView
 from .views import CurrencySettingsView, CurrencyRefreshView
 from .views import AppearanceSelectView, SettingCategorySelectView
@@ -157,6 +157,7 @@ urlpatterns = [
 
     url(r'^index/', IndexView.as_view(), name='index'),
     url(r'^search/', SearchView.as_view(), name='search'),
+    url(r'^searchresult/', SearchResultView.as_view(), name='search-api'),
     url(r'^stats/', DatabaseStatsView.as_view(), name='stats'),
 
     url(r'^auth/?', auth_request),

InvenTree/InvenTree/views.py

@@ -12,6 +12,7 @@ from django.utils.translation import gettext_lazy as _
 from django.template.loader import render_to_string
 from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
 from django.urls import reverse_lazy
+from django.db.models import Q
 
 from django.contrib.auth.mixins import PermissionRequiredMixin
 
@@ -20,6 +21,7 @@ from django.views.generic import ListView, DetailView, CreateView, FormView, Del
 from django.views.generic.base import RedirectView, TemplateView
 
 from djmoney.contrib.exchange.models import ExchangeBackend, Rate
+from rest_framework.schemas.coreapi import SchemaGenerator
 from common.settings import currency_code_default, currency_codes
 
 from part.models import Part, PartCategory
@@ -764,6 +766,23 @@ class SearchView(TemplateView):
         return super(TemplateView, self).render_to_response(context)
 
 
+class SearchResultView(TemplateView):
+    """Endpoint for search auto-complete
+    """
+
+    def get(self, request, *args, **kwargs):
+        query = request.GET.get('term', '')
+        if len(query) > 2:
+            objects = Part.objects.filter(
+                Q(name__icontains=query) |
+                Q(description__icontains=query) |
+                Q(IPN__icontains=query) |
+                Q(keywords__icontains=query) |
+                Q(category__name__icontains=query)).order_by('name')
+            return JsonResponse([{'id': a.pk, 'value': a.name} for a in objects[0:5]], safe=False)
+        return JsonResponse({})
+
+
 class DynamicJsView(TemplateView):
     """
     View for returning javacsript files,

InvenTree/templates/base.html

@@ -191,6 +191,14 @@ $(document).ready(function () {
     {% endif %}
 
     moment.locale('{{request.LANGUAGE_CODE}}');
+
+    $("#search-bar" ).autocomplete({
+      source: "{% url 'search-api' %}",
+      minLength: 2,
+      select: function( event, ui ) {
+        window.location = '/part/' + ui.item.id + '/';
+      }
+    });
 });
 
 </script>

InvenTree/templates/search_form.html

@@ -3,7 +3,7 @@
 <form class="navbar-form navbar-left" action="{% url 'search' %}" method='post'>
     {% csrf_token %}
     <div class="form-group">
-        <input type="text" name='search' class="form-control" placeholder="{% trans 'Search' %}"{% if query_text %} value="{{ query }}"{% endif %}>
+        <input type="text" name='search' class="form-control" id="search-bar" placeholder="{% trans 'Search' %}"{% if query_text %} value="{{ query }}"{% endif %}>
     </div>
     <button type="submit" id='search-submit' class="btn btn-default" title='{% trans "Search" %}'>
         <span class='fas fa-search'></span>