8/3/2020 Simple Django Ajax + JQuery Search Autocomplete - Nina J - Medium

Autocompletar búsqueda Django Ajax + JQuery

simple
Nina J Seguir
21 de mayo de 2018 · 1 min de lectura

Un par de pasos simples para implementar una ingeniosa barra de búsqueda de

autocompletado para su aplicación Django usando la función de autocompletar JQuery.

Agregue JQuery a su plantilla base.html:

<link rel = "stylesheet" href =

"http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type =
"text / css" media = "all" /> <script src =
"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type = "text / javascript"> </script> <script src = "https:
//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
"type =" text / javascript "> </script>

Agregue el siguiente formulario a su plantilla. Esto permite buscar texto y completarlo

automáticamente en la barra de búsqueda. Reemplace {% url 'search'%} con el nombre
de su controlador de búsqueda.

<form id = ”search” method = ”POST” action = ”{% url 'search'%}”>

{% csrf_token%}
<input type = ”text” class = ”form-control” id = ”txtSearch” name =
"TxtSearch">
<button type = "submit" class = "btn btn-default btn-submit"> Enviar
</button>
</form>

Agregue el siguiente Javascript para llamar a su función de búsqueda ajax.

https://medium.com/@ninajlu/django-ajax-jquery-search-autocomplete-d4b4bf6494dd 1/3
8/3/2020 Simple Django Ajax + JQuery Search Autocomplete - Nina J - Medium

<script>
$(document).ready(function(){
$("#txtSearch").autocomplete({
source: "/ajax_calls/search/",
minLength: 2,
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99);
}, 0);
}
});

});

</script>

In urls.py:

url(r'^ajax_calls/search/', autocompleteModel),

In views.py, add the following with your model as MODEL and the field you would like
to display for each of the objects as FIELD:

def autocompleteModel(request):
if request.is_ajax():
q = request.GET.get('term', '').capitalize()
search_qs = MODEL.objects.filter(name__startswith=q)
results = []
print q
for r in search_qs:
results.append(r.FIELD)
data = json.dumps(results)
else:
data = 'fail'
mimetype = 'application/json'
return HttpResponse(data, mimetype)

Done!

https://medium.com/@ninajlu/django-ajax-jquery-search-autocomplete-d4b4bf6494dd 2/3
8/3/2020 Simple Django Ajax + JQuery Search Autocomplete - Nina J - Medium

Web Development Django Ajax Jquery Autocomplete

Sobre Ayuda Legal

https://medium.com/@ninajlu/django-ajax-jquery-search-autocomplete-d4b4bf6494dd 3/3