0

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

1 ответ 1

2

Чтобы не изобретать велосипед с выпадающим списком для поля поиска, можно использовать 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>
5
  • Ругается на JsonResponse(results, safe=False) TypeError: <QuerySet [u'\u0411\u0430\u043b\u0430\u0448\u043e\u0432 \u0414', u'\u0411\u0430\u043b\u0430\u0448\u043e\u0432 \u0414 - \u0413\u043e\u0441\u0443\u0434\u0430\u0440\u0438 \u043c\u043e\u0441\u043a\u043e\u0432\u0441\u043a\u0438\u0435-08. \u0421\u0432\u044f\u0442\u0430\u044f \u0420\u0443\u0441\u044c']> is not JSON serializable Commented 25 июл. 2017 в 14:11
  • Странно. Попробуйте исправленный вариант. Commented 25 июл. 2017 в 14:37
  • Там надо JsonResponse(list(results), safe=False) :) Но теперь другая проблема - в браузер результаты приходят, но они не отображаются Commented 25 июл. 2017 в 14:45
  • Точнее так... Результат уходит из django, но в браузере в консоли для jquery статус (canceled) Commented 25 июл. 2017 в 14:50
  • Всё заработало :) Только иногда не прорисовывает... Будем посмотреть. Commented 25 июл. 2017 в 14:58

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.