Django search function using JQuery Ajax

In this example, I am going to show how to create a search function in Django using JQuery Ajax. This is a simple way to display results of a search query without reloading the current page or navigating to the another page. We are going to use the Users table which Django generates when doing a ‘python manage.py syncdb’ for the first time.

Step 1: Create an app.

Assuming that we have an existing project, we will start by creating our search app.

‘python manage.py startapp ajaxsearch’ this will create a folder ajaxsearch with files inside.

Step 2: Open the views.py inside the folder ajaxsearch

Edit views.py and insert the following code:

The ‘ajax_user_search’ function is called everytime we do a search query (when clicking the submit button).

What it does is search for any matches from the value given by the user against the data in the Users table. ‘q’ is the variable that contains the value given.

Step 3: create a file urls.py inside the ‘ajaxsearch’ folder.

Insert the following code:

This url pattern ‘url( r’^users/$’, ajax_user_search, name = ‘demo_user_search’ )’ will be used to call the function ‘ajax_user_search’ in our views.py.

Add this line of code to your urls.py in the project root:

my urls.py looks like this:

Step 4: Create the templates.

Let’s create our html files inside the templates folder. In this example, we will create 3 templates. ‘base.html’, ‘index.html’ and ‘results.html’.

Here is our base.html:

 

Our base.html will provide the skeleton structure defining elements that will be on every page in the site. It has two blocks (‘block extra_js’ and ‘block main’). ‘{% block extra_js %}’ will be filled later with javascript code needed to call a function in our views.py. This function will return a query set according to the keyword given which we are going to create later. Another block,  ‘{% block main %}’ will be used as a region for our search form.

Here is our index.html (this is just a form that asks for the search query):

 

Inside the block ‘extra_js’ are 2 functions. The first javascript function calls the function ‘ajax_user_search’ in the views.py we just created. This javascript function will be called everytime the submit button is clicked. It calls that Python function by accessing the url mapped to it (the url pattern with the name ‘demo_user_search’ in our urls.py inside the folder ajaxsearch). The second javascript function shows and hides the GIF loading image when needed.

Note: When the first function is called, it changes the content of the div with the id ‘results’. The content could be a table of results or a message saying that there are no matches found. So technically, it inserts the code inside the ‘results.html’ which we are going to create later and let Django do it’s job in displaying the necessary information.

Now let’s create our results.html (displays our search results):

 

You can also use this css ‘style.css’:

 

That’s it. We are done with our HTML files.

Those are the steps in making a JQuery Ajax search function for Django. We used the Users table to demonstrate how to create it but you can always use other tables you want.

References:

https://docs.djangoproject.com/en/dev/topics/db/queries/#complex-lookups-with-q-objects

http://www.nomadjourney.com/2009/01/using-django-templates-with-jquery-ajax/