После некоторых обширных исследований (googling) я не могу найти текущий учебник по настройке автозаполнения с использованием Django и JQuery. Кажется, что существует множество плагинов, и, как представляется, нет никакой согласованности или стандарта, о котором можно использовать или когда.
Я не профессионал ни в Django, ни в JQuery, но нуждаюсь в автозаполнении, которое хорошо документировано и довольно просто использовать.
Предложения?
Если вы ищете для поиска в своих моделях django, то что-то вроде:
from django.utils import simplejson
def autocompleteModel(request):
search_qs = ModelName.objects.filter(name__startswith=request.REQUEST['search'])
results = []
for r in search_qs:
results.append(r.name)
resp = request.REQUEST['callback'] + '(' + simplejson.dumps(result) + ');'
return HttpResponse(resp, content_type='application/json')
Для автозаполнения jQuery и вызова:
function searchOpen() {
var search = $('#txtSearch').val()
var data = {
search: search
};
$.ajax({
url: '/search.json',
data: data,
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'searchResult'
});
}
function searchResult(data) {
$( "#txtSearch" ).autocomplete ({
source: data
});
}
Наконец, чтобы соединить все это в вашей форме ввода, будет что-то вроде:
<input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />
Обратите внимание, что это также использует JQuery UI, а также в jQuery.
Между тем появился хороший учебник.
autocomplete делает все для вас, все, что вам нужно сделать, это следующее:
JS
$(function() {
$("#search-field").autocomplete({
source: "/ajax_calls/myFunction",
minLength: 2,
});
});
urls.py
url(r'^ajax_calls/myFunction/', 'my_app.views.handler_function'),
views.py
def get_drugs(request):
if request.is_ajax():
.....
data = json.dumps(results)
else:
data = 'fail'
mimetype = 'application/json'
return HttpResponse(data, mimetype)
Источник: http://flaviusim.com/blog/AJAX-Autocomplete-Search-with-Django-and-jQuery/
Я большой поклонник django-autocomplete: https://bitbucket.org/tyrion/django-autocomplete/wiki/Home. Его получило приятный plug-and-play, и его очень легко интегрировать с вашими приложениями без дополнительного кодирования.
Предположим, вы хотите настроить автозаполнение в каком-либо поле ввода (например, <input type="text" id="id_input">) с именем пользователя. Так я это сделал, и он работал плавно для меня.
urls.py
Прежде всего, добавьте URL-адрес, где ajax будет искать
url(r'^ajax/autocomplete/$', views.autocomplete, name='ajax_autocomplete')
views.py
Затем установите представление для извлечения из базы данных необходимой информации
from django.http import JsonResponse
def autocomplete(request):
if request.is_ajax():
queryset = User.objects.filter(username__startswith=request.GET.get('search', None))
list = []
for i in queryset:
list.append(i.username)
data = {
'list': list,
}
return JsonResponse(data)
JavaScript
Наконец, вам нужно сделать функцию JavaScript, которая переходит в базу данных и возвращает имена пользователей, которые соответствуют значению поля ввода каждый раз, когда вы нажимаете (и отпускаете) ключ. Для этого мы будем использовать Ajax, JQuery и функцию автозаполнения JQuery-ui
jQuery(function() {
$("#id_input").on('keyup', function(){
var value = $(this).val();
$.ajax({
url: "{% url 'ajax_autocomplete' %}",
data: {
'search': value
},
dataType: 'json',
success: function (data) {
list = data.list;
$("#id_input").autocomplete({
source: list,
minLength: 3
});
}
});
});
});
И это, мой друг! Для получения дополнительной информации вы можете проверить это tutorial
django-autocomplete-light - очень хороший вариант. Он очень прост в использовании и хорошо документирован. Ссылка: https://github.com/yourlabs/django-autocomplete-light
Документация: https://django-autocomplete-light.readthedocs.org/en/master/
Есть способ без использования Json:
Пример: предположим, что у вас есть модель с именем College:
class College(models.Model):
collegeName = models.CharField(max_length=250)
def __str__(self):
return self.collegeName
Теперь создайте контекст с именем "all_colleges" = College.objects.all() в ваш шаблон:
HTML:
<input type="text" id="college"/>
JS:
$( function() {
var availableColleges = [
{% for clg in all_colleges %}
"{{clg}}",
{%endfor%}
];
$( "#clg" ).autocomplete({
source: availableColleges
});
} );
Ресурсы, которые будут включены в шаблон:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
Что это!
Если вам нужно автозаполнение для отображения параметров, начинающихся с введенного термина, измените функцию фильтра автозаполнения фильтра по умолчанию, добавив этот фрагмент в свой шаблон:
// over write the default autocomplete function to match the option starting with entered term
$.ui.autocomplete.filter = function (array, term) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
return $.grep(array, function (value) {
return matcher.test(value.label || value.value || value);
});
};
Комментарий, если вы столкнулись с любой проблемой:)
Я обнаружил, что самый простой способ начать работу (хотя, вероятно, не оптимальный для производства) - это JQuery Autocomplete Widget.
Самый простой способ просто скопировать код в ваш html, используя массив как source:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Cities example</title>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Cities: </label>
<input id="tags">
</div>
<script>
$( function() {
var availableTags = [
'Barcelona',
'Berlin',
'London',
'Madrid',
'Rome',
'Paris'
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</body>
</html>
В django 1.10 я использую тот же код
URL:
# Ajax
url(r'^search-autocomplete/$', autocompleteModel, name='search-autocomplete'),
Вид:
def autocompleteModel(request):
search_qs = Account.objects.filter(email__startswith=request.GET['search'])
results = []
for r in search_qs:
results.append(r.email)
resp = request.GET['callback'] + '(' + simplejson.dumps(results) + ');'
return HttpResponse(resp, content_type='application/json')
JS:
$(document).ready(function () {
function searchOpen() {
var search = $('#countryId').val();
$.ajax({
url: '/cabinet/search-autocomplete',
dataType: 'jsonp',
type: 'GET',
async: false,
data: injectCsrfToken({
search: search
}),
success: function (data) {
searchResult(data)
},
error: function () {
console.log('error');
}
});
}
function searchResult(data) {
console.log('sdfsdfd');
$( "#countryId" ).autocomplete ({
source: data
});
}
$("#countryId").on('keyup', function () {
searchOpen();
});
});
HTML:
<input id="countryId" type="text" name="fname">