<p></p><p>In this post we are going to learn how to add autocomplete function in django with the help of jquery ajax. I am not going to put some code here and leave you to understand, instead I will make a short application which will take names as input and after adding the functionality you will be able to get autocomplete suggestion based on the previous inputs.</p><p>Lets start a project&nbsp;</p><pre>django-admin startproject root .&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# start the project as root in current directory python manage.py startapp search&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# start an app named search</pre><p><br></p><p>Add <b>'search' </b>to your installed_apps list like:<br><br></p><pre>INSTALLED_APPS = [ ...# <span style="color: rgb(153, 153, 136); font-family: monospace, monospace; font-size: 14px; font-style: italic; background-color: rgb(241, 241, 241);">code suppressed for brevity </span> 'search', ]</pre><p><br>Now in search app model create a new model named name, your search/models.py file will be like&nbsp;<br><br></p><pre>from django.db import models class Name(models.Model): &nbsp;&nbsp;&nbsp;&nbsp;name = models.CharField(max_length=50) &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;def __str__(self): &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return self.name #for admin panel</pre><p><br>register your model in admin.py with <b>'admin.site.register(Name)'</b>. Now do migration by typing the following code :<br><br></p><pre>python manage.py makemigrations python manage.py migrate</pre><p><br></p><p>Create a super user and in the admin panel input some dummy names for test. Now it's time to add jquery and ajax post request. First import the following libraries in your <b>base.html</b></p><p><b><br></b></p><pre><b>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt; &lt;/script&gt; &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;</b></pre><p><br></p><p>Add following code where you want to add the search function:<br></p><p><br></p><pre>&lt;div class="ui-widget"&gt; &lt;label for="names"&gt;Names: &lt;/label&gt; &lt;input id="naems"&gt; &lt;/div&gt;<br></pre><p><br>Below the same html add the jquery function to call and populate the suggestion for you.</p><p><br></p><pre>&lt;script&gt; $(function() { $("#names").autocomplete({ source: "/api/get_names/", select: function (event, ui) { //item selected AutoCompleteSelectHandler(event, ui) }, minLength: 2, }); }); function AutoCompleteSelectHandler(event, ui) { var selectedObj = ui.item; } &lt;/script&gt;<br></pre><br>Add the api end point <b>"/api/get_names/" </b>to your url with the following code&nbsp;<p></p><p><br></p><pre>path('api/get_places/', views.get_names, name='get_places'),</pre><p><br></p><p>Now let's write the view function that will be used to handle ajax request and populate data. Add the get_names function to your view.py file to handle the request.</p><p><br></p><pre>def get_names(request): if request.is_ajax(): q = request.GET.get('term', '') names = Name.objects.filter(name__icontains=q) results = [] for pl in names: place_json = {} place_json = pl.name results.append(place_json) data = json.dumps(results) else: data = 'fail' mimetype = 'application/json' return HttpResponse(data, mimetype)<br></pre><p><br></p><p><span style="font-family: Roboto, sans-serif;">Here we setup what goes into the autocomplete search terms based on the user's search term,&nbsp;</span><code style="font-size: 12.6px;">q</code><span style="font-family: Roboto, sans-serif;">. The function filters through your database and returns a json file with the correct data to the jQuery autocomplete function.</span></p><p></p><p></p><p></p>

About the author

Tarek

My goal is to excel in advanced computer applications in order to contribute to the organization as well as to self-efficacy and communication skills to build my career. I like programming challenges to solve under pressure.