.. index:: pair: Django ; base.html pair: jQuery ; UI pair: jQuery-ui ; autocomplete .. _autocomplete: ============================================================================ 2016-10-18 try a more simple approach with jquery-ui autocomplete widget ============================================================================ .. seealso:: - https://jqueryui.com/autocomplete/ - http://guiqinqian.blogspot.fr/2012/01/using-jquery-auto-complete-in-django.html - https://github.com/jquery/jquery-ui .. figure:: autocomplete_widget.png :align: center .. contents:: :depth: 3 Installation ============= .. figure:: jenny_qian_solution.png :align: center Other sources: - http://blog.appliedinformaticsinc.com/autocomplete-input-field-in-django-template-with-jquery-ui/ - https://openclassrooms.com/courses/decouvrez-la-puissance-de-jquery-ui/l-autocompletion-1 Create a ``projects`` application ================================== :: python manage.py startapp projects :: | ajax_selects_singers_db | manage.py | tree.txt | +---projects | | admin.py | | apps.py | | models.py | | tests.py | | views.py | | __init__.py | | | \---migrations | __init__.py Add the Django model ``Project`` ================================ .. literalinclude:: ../../../../../projet_ajax/projects/models.py :linenos: Add the ``project`` in the INSTALLED_APPS ========================================= :: # # https://docs.djangoproject.com/en/dev/ref/applications/#django.apps.AppConfig 'singers.apps.SingersConfig', # http://guiqinqian.blogspot.fr/2012/01/using-jquery-auto-complete-in-django.html 'projects.apps.ProjectsConfig' ] .. literalinclude:: ../../../../../projet_ajax/projet_ajax/settings.py :linenos: makemigrations =============== :: python manage.py makemigrations projects :: Migrations for 'projects': projects\migrations\0001_initial.py: - Create model Project .. literalinclude:: ../../../../../projet_ajax/projects/migrations/0001_initial.py :linenos: sqlmigrate =========== :: python manage.py sqlmigrate projects :: (ajax_django_35) C:\projects_id3\django_ajax_select\projet_ajax>python manage.py sqlmigrate projects 0001 :: BEGIN; -- -- Create model Project -- CREATE TABLE "projects_project" ("id" integer NOT NULL PRIMARY KEY AUTOINCREMENT, "title" varchar(200) NOT NULL, "champion_id" integer NOT NULL REFERENCES "auth_user" ("id")); CREATE INDEX "projects_project_68b9a77a" ON "projects_project" ("champion_id"); COMMIT; migrate ======== :: python manage.py migrate projects :: Operations to perform: Apply all migrations: projects Running migrations: Applying projects.0001_initial... OK Create the projects/forms.py file and add 2 forms ================================================= .. literalinclude:: ../../../../../projet_ajax/projects/forms.py :linenos: Create the projects/urls.py file and add the champion auto complete URL ======================================================================== .. literalinclude:: ../../../../../projet_ajax/projects/urls.py :linenos: Add the projects.urls file to the root urls.py ================================================ :: url(r'^projects/', include('projects.urls', namespace='projects')), .. literalinclude:: ../../../../../projet_ajax/projet_ajax/urls.py :linenos: Add the ProjectUpdateView ========================== .. literalinclude:: ../../../../../projet_ajax/projects/views.py :linenos: Create the templates/projects/project/update.html django template ================================================================== .. seealso:: - http://code.jquery.com/ui/ This template file is used by the ProjectUpdateView. .. figure:: jquery_ui.png :align: center .. literalinclude:: ../../../../../projet_ajax/projects/templates/projects/project/update.html :linenos: :language: django Add the jquery-ui javascript code ================================== .. seealso:: - http://api.jqueryui.com/autocomplete/ - http://api.jqueryui.com/autocomplete/#option-source - http://api.jqueryui.com/autocomplete/#option-minLength - http://api.jqueryui.com/autocomplete/#event-select :: $( "#id_champion_display" ).autocomplete({ source: "{% url champion_auto_complete %}", minLength:2, select:function(event,ui) { $("#id_champion").val(ui.item.id) } }); Add the admin interface ======================= .. literalinclude:: ../../../../../projet_ajax/projects/admin.py :linenos: Create some projects with the admin interface ============================================= .. figure:: projects_admin.png :align: center .. figure:: add_project.png :align: center Reading Project record from the commande line ============================================= :: python manage.py shell_plus (ajax_django_35) C:\projects_id3\django_ajax_select\projet_ajax>python manage.py shell_plus # Shell Plus Model Imports from django.contrib.admin.models import LogEntry from django.contrib.auth.models import Group, Permission, User from django.contrib.contenttypes.models import ContentType from django.contrib.sessions.models import Session from projects.models import Project from singers.models import Author, Book, Group, Label, Person, Release, Song # Shell Plus Django Imports from django.db.models import Avg, Case, Count, F, Max, Min, Prefetch, Q, Sum, When from django.db import transaction from django.conf import settings from django.utils import timezone from django.urls import reverse from django.core.cache import cache Python 3.5.2 (v3.5.2:4def2a2901a5, Jun 25 2016, 22:18:55) [MSC v.1900 64 bit (AMD64)] Type "copyright", "credits" or "license" for more information. IPython 5.1.0 -- An enhanced Interactive Python. ? -> Introduction and overview of IPython's features. %quickref -> Quick reference. help -> Python's own help system. object? -> Details about 'object', use 'object??' for extra details. In [1]: p1=Project.objects.first() In [2]: p1 Out[2]: In [3]: p1.id Out[3]: 1 Add some users with the admin interface ======================================== .. figure:: add_some_users_with_admin.png :align: center Add some users with the command line interface =============================================== .. seealso:: - https://docs.djangoproject.com/en/dev/topics/auth/default/#user-objects The most direct way to create users is to use the included create_user() helper function: :: In [4]: user = User.objects.create_user('john', 'lennon@thebeatles.com', 'johnpassword') In [5]: user = User.objects.create_user('albert', 'albert@thebeatles.com', 'albertpassword') In [6]: user = User.objects.create_user('zoya', 'zoya@thebeatles.com', 'zoyapassword') In [7]: user = User.objects.create_user('nigel', 'nigel@thebeatles.com', 'nigelpassword') In [8]: users=User.objects.all() In [9]: users Out[9]: , , , , , , , , , ]> .. _last_look: Try the URL : http://127.0.0.1:8000/projects/project/1/update =============================================================== **OK, this time this works fine !** .. warning:: La saisie est agréable, il faut améliorer le look. .. figure:: ok_saisie_champion.png :align: center :: [18/Oct/2016 15:17:26] "GET /projects/project/1/update/ HTTP/1.1" 200 3423 [18/Oct/2016 15:17:44] "GET /projects/champion_auto_complete/?term=zo HTTP/1.1" 200 45 [18/Oct/2016 15:17:51] "POST /projects/project/1/update/ HTTP/1.1" 302 0 [18/Oct/2016 15:17:51] "GET /projects/project/1/update/ HTTP/1.1" 200 3418 [18/Oct/2016 15:18:47] "GET /projects/champion_auto_complete/?term=ni HTTP/1.1" 200 48 [18/Oct/2016 15:19:00] "POST /projects/project/1/update/ HTTP/1.1" 302 0 [18/Oct/2016 15:19:00] "GET /projects/project/1/update/ HTTP/1.1" 200 3420