Причина, по которой задаю данный вопрос: Я полный ноль в javascript вообще, и jquery в частности.
Но стоит задача сделать живой поиск по модели Book, выдавать к примеру по 10 результатов. Со скоростью поиска самих объектов всё прекрасно. Не смог найти только нормально разжеванной связки backend - frontend, где бы объяснялось, как это должно работать.
Есть примеры для старых версий django, на новой они не работают из за удаления некоторых функций...
Буду благодарен за любые куски кода/ ссылки на них.
Добавить комментарий
|
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>
-
Ругается на 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
-
-
Там надо JsonResponse(list(results), safe=False) :) Но теперь другая проблема - в браузер результаты приходят, но они не отображаются Commented 25 июл. 2017 в 14:45
-
Точнее так... Результат уходит из django, но в браузере в консоли для jquery статус (canceled) Commented 25 июл. 2017 в 14:50
-
Всё заработало :) Только иногда не прорисовывает... Будем посмотреть. Commented 25 июл. 2017 в 14:58