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