.. index:: pair: Tests ; jQuery UI autocomplete pair: scrollbar ; jQuery UI autocomplete .. _jquery_ui_autocomplete: ============================= jQuery UI autocomplete test ============================= .. seealso:: - https://jqueryui.com/autocomplete/ - https://github.com/jquery/jquery-ui/tree/master/demos - https://github.com/jquery/jquery-ui/blob/master/demos/autocomplete/maxheight.html - https://www.npmjs.com/package/jquery-ui.autocomplete.scroll - https://github.com/anseki/jquery-ui-autocomplete-scroll .. contents:: :depth: 3 .. figure:: test_with_scrollbar.png :align: center jQuery UI with scrollbar (thanks https://github.com/anseki) Running the local Django web server ==================================== :: System check identified no issues (0 silenced). October 26, 2016 - 08:54:53 Django version 1.10.2, using settings 'projet_ajax.settings' Starting development server at http://127.0.0.1:8004/ Quit the server with CTRL-BREAK. The projects/forms.py module ============================= .. code-block:: python #!/usr/bin/python # -*- coding: utf8 -*- """The project's forms. """ from django import forms from .models import Project class ProjectChampionForm(forms.ModelForm): """The champion project form""" champions_choice_list = forms.CharField(max_length=100, help_text='type username or email') class Meta: model = Project fields = ('title', 'champions_choice_list', 'champion',) def __init__(self, *args, **kwargs): super(ProjectChampionForm, self).__init__(*args, **kwargs) self.fields['champions_choice_list'].label = "Update the champion" self.fields['champion'].widget = forms.HiddenInput() The HTML and JavaScript part (the Django Template) ==================================================== .. code-block:: Django {% load static %} {% load staticfiles %} jQuery UI complete simple example {# https://jqueryui.com/autocomplete/ #}

Test jquery EasyAutocomplete

Update of the project '(title:{{ project.title }} champion:{{ project.champion.username }})

{# https://docs.djangoproject.com/en/dev/topics/forms/ #}

{% csrf_token %}

{{ form.id }} {{ form.non_field_errors }} {# Include the hidden fields #} {% for hidden in form.hidden_fields %} {# here we will have the champion filed (which is hidden) #} {{ hidden }} {% endfor %}

Title:	{{ form.title }}
Champion:	{{ form.champions_choice_list }}

{# https://github.com/anseki/jquery-ui-autocomplete-scroll #} The projects/views.py module ============================= .. code-block:: python class ProjectUpdateViewJQueryUIAutoComplete(UpdateView): """Update the view with the jQuery UI Autocomplete plugin. Documentation: - http://ccbv.co.uk/projects/Django/1.10/django.views.generic.edit/UpdateView/ """ model = Project form_class = ProjectChampionForm context_object_name = 'project' template_name = 'projects/project/update_jquery_ui_autocomplete.html' def get_object(self, queryset=None): """Pour mémoriser self.demande_article""" self.object = super(ProjectUpdateViewJQueryUIAutoComplete, self).get_object(queryset) return self.object def post(self, request, *args, **kwargs): logger.warning("Hello from ProjectUpdateViewJQueryUIAutoComplete !") return super(ProjectUpdateViewJQueryUIAutoComplete, self).post(request, *args, **kwargs) The projects/urls.py module ============================= .. code-block:: python urlpatterns = [ url(r'^project/(?P\d+)/update/$', ProjectUpdateView.as_view(), name='project_update'), url(r'^project/(?P\d+)/updateeasy/$', ProjectUpdateViewEasyAutoComplete.as_view(), name='project_update_easy'), url(r'^project/(?P\d+)/update_jquery_ui/$', ProjectUpdateViewJQueryUIAutoComplete.as_view(), name='project_update_jquery_ui'), The jQuery UI scrollbar module =============================== .. seealso:: :ref:`jquery_ui_autocomplete_scroll`