Поиск через ajax в django

287

26 июля 2017, 22:32

Причина, по которой задаю данный вопрос: Я полный ноль в javascript вообще, и jquery в частности.
Но стоит задача сделать живой поиск по модели Book, выдавать к примеру по 10 результатов. Со скоростью поиска самих объектов всё прекрасно. Не смог найти только нормально разжеванной связки backend - frontend, где бы объяснялось, как это должно работать.
Есть примеры для старых версий django, на новой они не работают из за удаления некоторых функций...
Буду благодарен за любые куски кода/ ссылки на них.

Answer 1

Чтобы не изобретать велосипед с выпадающим списком для поля поиска, можно использовать jQuery UI Autocomplete.

views.py

from django.db.models.functions import Lower
from django.http import JsonResponse
def search(request):
    if request.is_ajax():
        q = request.GET.get('term', '')
        results = []
        if len(q) > 2:
            results = list(Book.objects.filter(title__istartswith=q).values_list(Lower('title'), flat=True))
        return JsonResponse(results, safe=False)
    else:
        # Обработка обычного сабмита формы

search.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  </head>
  <body>
      ...
      <div id="search">
        <form action="{% url 'search' %}">
            {% csrf_token %}
            <input type="text" name="q" placeholder="Поиск">
            <input type="submit" value="Найти">
        </form>
      </div>
      ...
      <script>
          <!-- Начало кода для для работы csrf с ajax -->
          function getCookie(name) {
              var cookieValue = null;
              if(document.cookie && document.cookie != '') {
                  var cookies = document.cookie.split(';');
                  for(var i = 0; i < cookies.length; i++) {
                      var cookie = jQuery.trim(cookies[i]);
                      if(cookie.substring(0, name.length + 1) == (name + '=')) {
                          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                          break;
                      }
                  }
              }
              return cookieValue;
          }
          $.ajaxSetup({
              global: true,
              beforeSend: function(xhr, settings) {
                  if(!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                      xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                      xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded; charset=UTF-8');
                  }
              },
              timeout: 8000
          });
          <!-- /Конец кода для работы csrf с ajax -->
          <!-- Подключение автодополнения -->
          $('#search input[name="q"]').autocomplete({
              'source': '{% url "search" %}',
              'minLength': 2,
              'appendTo': "#search"
          });
      </script>
  </body>
</html>