Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

Chapter 7: Using jQuery UI Autocomplete in DjangoTemplates

Charu Sharma

Fundamental Research GroupIIT Bombay

Charu Sharma (IIT Bombay) 1 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

Introduction to Autocomplete

Autocomplete involves the program predicting a word or phrase that theuser wants to type in without the user actually typing it in completely.Autocomplete, or word completion, is a feature provided by many webbrowsers, e-mail programs, search engine interfaces, source code editors,database query tools, word processors, and command line interpreters.Autocomplete is also available for text editors.

Charu Sharma (IIT Bombay) 2 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

EXAMPLE:Search Form

In this Example,we are using Jquery with Django to get the Autocompletefunctionality

Charu Sharma (IIT Bombay) 3 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

Source Code Of Example

1 Go into the autocomplete/autoapp directory, and create the directorytemplates. Enter the templates directory.

2 Create a template file named name.html. containing the followingtemplate:

Charu Sharma (IIT Bombay) 4 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

Charu Sharma (IIT Bombay) 5 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

models.py

Add models in models.py file

Charu Sharma (IIT Bombay) 6 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

forms.py

Then create the forms.py file containing the following:

Charu Sharma (IIT Bombay) 7 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

views.py

Then create the views.py file containing the following:

Charu Sharma (IIT Bombay) 8 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

urls.py

Go up one level to the myapp directory and edit the urls.py file so that thefirst line after

Charu Sharma (IIT Bombay) 9 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

settings.py

Edit settings.py file, and add:

Charu Sharma (IIT Bombay) 10 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

urls.py

Edit urls.py file in mysite directory, and include myapp.urls:

Charu Sharma (IIT Bombay) 11 / 12

Using jQuery UI Autocomplete in Django Templates Fundamental Research Group,IIT Bombay

Run

Then, from the command line, run:

python manage.py runserver 0.0.0.0:9000

http://localhost:9000/autoapp/names

Charu Sharma (IIT Bombay) 12 / 12