After some extensive research (Googling), I cannot find a current tutorial on how to set up autocomplete using Django and jQuery. There appears to be a variety of plugins and there appears to be no consistency or standard about which to use or when.
I'm not a pro at either Django or jQuery, but need an autocomplete solution that is well documented and fairly simple to utilize.
Suggestions?
If you're looking to search from within your django models then something like:
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')
For the jQuery autocomplete and call:
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
});
}
Finally to connect it all on your input form would have something like:
<input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />
Note, this is using Jquery UI as well in addition to stock jQuery.
Meanwhile, a good tutorial appeared.
autocomplete does everything for you, all you have to do is the following:
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)
SOURCE: http://flaviusim.com/blog/AJAX-Autocomplete-Search-with-Django-and-jQuery/
Let's say you want to set up autocomplete on some input field (like <input type="text" id="id_input">) with the username of your users. This is the way I did it:
urls.py
First of all, add a url that will be used by the AJAX call.
url(r'^ajax/autocomplete/$', views.autocomplete, name='ajax_autocomplete')
views.py
Then set a view to retrieve the information (i.e the usernames, in this case) from the database
from django.http import JsonResponse
def autocomplete(request):
if request.is_ajax():
username_query = request.GET.get('username_query', '')
usernames = (User.objects
.filter(username__startswith=username_query)
.values_list('username', flat=True))
data = {
'usernames': usernames,
}
return JsonResponse(data)
JavaScript
Finally, you need to make a JavaScript function that goes to the database and returns the usernames that match with the value of the input field every time you press (and release) a key. For this, we are going to use Ajax, JQuery and the JQuery-ui's autocomplete function
jQuery(function() {
$("#id_input").on('keyup', function(){
let value = $(this).val();
$.ajax({
url: "{% url 'ajax_autocomplete' %}",
data: {
'username_query': value
},
dataType: 'json',
success: function (data) {
let usernames = data.usernames;
$("#id_input").autocomplete({
source: usernames,
minLength: 3
});
}
});
});
});
And that's it! For more information, you can check out this tutorial