add autocomplete to search box

softwarecite/front/templates/base.html

@@ -17,6 +17,7 @@
 
  gtag('config', 'G-R4RZYXNC9Q');
  </script>
+ <link rel="stylesheet" href="https://unpkg.com/@trevoreyre/autocomplete-js/dist/style.css" />
 
  {% tailwind_css %}
 </head>
@@ -40,17 +41,12 @@
  <span class="sr-only">Search</span>
  </button>
  <div class="relative hidden w-full md:block">
- <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
- <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
- xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
- d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
- </svg>
- <span class="sr-only">Search icon</span>
+ <div id="autocomplete" class="autocomplete mx-auto">
+ <input id="search-navbar"
+ class="autocomplete-input"
+ placeholder="Search a Python or R package name...">
+ <ul class="autocomplete-result-list"></ul>
  </div>
- <input type="text" id="search-navbar"
- class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
- placeholder="Search a Python or R package name...">
  </div>
  {% endif %}
  <button id="navbar-toggle" data-collapse-toggle="navbar-search" type="button"
@@ -67,16 +63,12 @@
  <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-2" id="navbar-search">
  {% if request.path != '/' %}
  <div class="relative mt-3 md:hidden">
- <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
- <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
- xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
- d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
- </svg>
+ <div id="autocomplete" class="autocomplete mx-auto">
+ <input id="search-navbar"
+ class="autocomplete-input pl-10"
+ placeholder="Search a Python or R package name...">
+ <ul class="autocomplete-result-list"></ul>
  </div>
- <input type="text" id="search-navbar"
- class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
- placeholder="Search a Python or R package name...">
  </div>
  {% endif %}
  <ul
@@ -107,6 +99,7 @@
  </a>
  </div>
  </footer>
+ <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
  <script>
  document.addEventListener('DOMContentLoaded', function () {
  const button = document.getElementById('navbar-toggle');
@@ -136,6 +129,28 @@
  }
  });
  });
+ var name; // global variable that keeps the name
+ // Select all of the elements
+ const elements = document.querySelectorAll('#autocomplete')
+ // Attach autocomplete to each element
+ elements.forEach(el => {
+ new Autocomplete(el, {
+ search: input => {
+ const url = `/search/?package=${input}`;
+ return new Promise(resolve => {
+ if (input.length < 2) {
+ return resolve([])
+ }
+ fetch(url).then(response => response.json()).then(data => {
+ resolve(data.package);
+ })
+ })
+ },
+ onSubmit: result => {
+ name = result; //pass clicked result to global
+ }
+ })
+ })
  });
  </script>
  {% block script %}

softwarecite/front/templates/index.html

@@ -4,17 +4,11 @@
 <div class="container mx-auto flex flex-col items-center justify-center">
  <h1 class="text-3xl text-green-800 p-2 mt-4">Softwarecite</h1>
  <div class="relative w-full lg:w-1/2 mt-4">
- <input type="text" id="search-navbar"
- class="block w-full h-400 p-2 pr-10 pl-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-white focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-50 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-800 dark:focus:ring-blue-500 dark:focus:border-blue-500"
+ <div id="autocomplete" class="autocomplete mx-auto mt-4">
+ <input id="search-navbar"
+ class="autocomplete-input"
  placeholder="Search a Python or R package name...">
-
- <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
- <svg class="w-4 h-4 text-gray-500" aria-hidden="true"
- xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
- d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
- </svg>
- <span class="sr-only">Search icon</span>
+ <ul class="autocomplete-result-list"></ul>
  </div>
  </div>
  <div class="w-full lg:w-1/2 p-4 mt-8">

softwarecite/front/templates/package.html

@@ -50,7 +50,7 @@ <h2 class="text-lg font-semibold mb-2">Files</h2>
  </ul>
  <div class="sticky bottom-0 left-0 right-0 p-4">
  <span class="mr-2">
- Page {{ results.number }} of {{ results.paginator.num_pages }}.
+ Page {{ results.number }} of {{ results.paginator.num_pages }}
  </span>
  {% if results.has_previous %}
  <a href="?page=1" class="px-2 py-1 bg-blue-500 text-white rounded">first</a>

softwarecite/front/urls.py

@@ -4,11 +4,13 @@
 from .views import package_view
 from .views import about_view
 from .views import badge_view
+from .views import search_view
 
 
 urlpatterns = [
  path('', index, name='index'),
  path('package/<str:name>/', package_view, name='package_view'),
  path('about/', about_view, name='about_view'),
- path('badge/<str:package>/', badge_view, name='badge_view')
+ path('badge/<str:package>/', badge_view, name='badge_view'),
+ path('search/', search_view, name='search_view')
 ]

softwarecite/front/views.py

@@ -1,5 +1,5 @@
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
-from django.http import HttpResponse
+from django.http import HttpResponse, JsonResponse
 from django.shortcuts import render
 
 import pybadges
@@ -40,3 +40,15 @@ def badge_view(request, package):
  badge = pybadges.badge(left_text='replications', right_text=str(count))
 
  return HttpResponse(badge, content_type='image/svg+xml')
+
+
+def search_view(request):
+ """everytime user inputs to search box, this function runs"""
+ package = request.GET.get("package")
+ package_list = set()
+ if package:
+ #collect every objects that contains the input text
+ packages = Package.objects.filter(name__icontains=package)[:100]
+ for p in packages:
+ package_list.add(p.name)
+ return JsonResponse({'status':200, 'package':list(package_list)})