yourlabs · mpasternak · Oct 28, 2013 · Oct 28, 2013 · Oct 28, 2013
diff --git a/autocomplete_light/autocomplete/__init__.py b/autocomplete_light/autocomplete/__init__.py
@@ -1,3 +1,4 @@
+from autocomplete_light.autocomplete.base import AutocompleteJSONP
 from .base import AutocompleteBase
 from .list import AutocompleteList
 from .model import AutocompleteModel
@@ -18,6 +19,9 @@ class AutocompleteChoiceListBase(AutocompleteChoiceList, AutocompleteBase):
 class AutocompleteModelBase(AutocompleteModel, AutocompleteBase):
     pass
 
+class AutocompleteModelJSONP(AutocompleteModel, AutocompleteJSONP):
+    get_parameter = 'term'
+
 
 class AutocompleteModelTemplate(AutocompleteModel, AutocompleteTemplate):
     choice_template = 'autocomplete_light/model_template/choice.html'

diff --git a/autocomplete_light/autocomplete/base.py b/autocomplete_light/autocomplete/base.py
@@ -2,6 +2,7 @@
 from django.core.exceptions import ImproperlyConfigured
 from django.utils.html import escape
 from django.utils.translation import ugettext_lazy as _
+import json
 
 __all__ = ('AutocompleteInterface', 'AutocompleteBase')
 
@@ -128,3 +129,20 @@ def choice_label(self, choice):
         Convert a choice to a label.
         """
         return unicode(choice)
+
+
+class AutocompleteJSONP(AutocompleteBase):
+    """An autocomplete implementation, that spews out JSONP-data, for
+    instant use with jquery-ui widget .autocomplete()."""
+
+    def choice_json(self, choice):
+        return {'id': choice.pk,
+                'label': self.choice_label(choice),
+                'value': self.choice_label(choice)}
+
+    def autocomplete_html(self):
+        ret = []
+        for choice in self.choices_for_request():
+            ret.append(self.choice_json(choice))
+
+        return json.dumps(ret)
diff --git a/autocomplete_light/autocomplete/model.py b/autocomplete_light/autocomplete/model.py
@@ -28,6 +28,7 @@ class AutocompleteModel(object):
     search_fields = None
     split_words = False
     order_by = None
+    get_parameter = 'q'
 
     def choice_value(self, choice):
         """
@@ -69,7 +70,7 @@ def choices_for_request(self):
         """
         assert self.choices is not None, 'choices should be a queryset'
         assert self.search_fields, 'autocomplete.search_fields must be set'
-        q = self.request.GET.get('q', '')
+        q = self.request.GET.get(self.get_parameter, '')
         exclude = self.request.GET.getlist('exclude')
 
         conditions = self._choices_for_request_conditions(q,

diff --git a/test_project/jquery_support/__init__.py b/test_project/jquery_support/__init__.py
diff --git a/test_project/jquery_support/autocomplete_light_registry.py b/test_project/jquery_support/autocomplete_light_registry.py
@@ -0,0 +1,13 @@
+from cities_light.contrib.autocompletes import CityAutocomplete
+from cities_light.models import City
+from tagging.models import Tag
+
+import autocomplete_light
+
+class CityAutocompleteJSONP(autocomplete_light.AutocompleteModelJSONP):
+    search_fields = ('search_names',)
+    choices = City.objects.all()
+
+
+
+autocomplete_light.register(CityAutocompleteJSONP)
diff --git a/test_project/jquery_support/models.py b/test_project/jquery_support/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/test_project/jquery_support/templates/jquery_support/index.html b/test_project/jquery_support/templates/jquery_support/index.html
@@ -0,0 +1,70 @@
+<html>
+
+
+<head>
+
+    <link rel="stylesheet"
+          href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
+    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
+    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+
+</head>
+<body>
+<p>
+
+    Here's the widget. It uses CityAutocompleteJSONP, which is an autocomplete,
+    that utilizes cities-light database, so please enter city name below.
+
+</p>
+
+<p>
+    Currently, this is in very early stage, so don't expect this to be a
+    drop-in replacement for "normal" form controls. On the other hand, this
+    can be easily hacked to be an in-drop replacement, just like
+    django-autocomplete-light's original control is now.
+</p>
+
+<p>
+    <input id="test" size="50" />
+</p>
+
+<p>
+    <button id="result">Click me to get the ID value!</button>
+</p>
+<script>
+
+    $(document).ready(function () {
+
+        // When the document is ready, you:
+        // - init the autocomplete like this:
+        $("#test").autocomplete({
+
+            // - give it a source parameter
+            source: '/autocomplete/CityAutocompleteJSONP/',
+
+            // - decide, after how many chars dropdown pops up
+            minLength: 0,
+
+            // - disallow non-dropdown input values
+            change: function(evt, ui){
+                if (ui.item == null) {
+                    alert("Please select value from the dropdown.");
+                    $("#test").val('').focus();
+                }
+            },
+
+            // - save the ID of selected element somewhere
+            select: function (evt, ui) {
+                $("#test").attr("data-id", ui.item.id);
+            }
+
+        });
+
+        $("#result").click(function () {
+            // - and read the value
+            alert("Value is: " + $("#test").attr("data-id"));
+        });
+    });
+</script>
+</body>
+</html>
diff --git a/test_project/jquery_support/tests.py b/test_project/jquery_support/tests.py
@@ -0,0 +1,16 @@
+"""
+This file demonstrates writing tests using the unittest module. These will pass
+when you run "manage.py test".
+
+Replace this with more appropriate tests for your application.
+"""
+
+from django.test import TestCase
+
+
+class SimpleTest(TestCase):
+    def test_basic_addition(self):
+        """
+        Tests that 1 + 1 always equals 2.
+        """
+        self.assertEqual(1 + 1, 2)
diff --git a/test_project/jquery_support/urls.py b/test_project/jquery_support/urls.py
@@ -0,0 +1,7 @@
+from django.conf.urls import patterns, url
+from jquery_support.views import JquerySupportView
+
+
+urlpatterns = patterns('',
+    url(r'$', JquerySupportView.as_view()),
+)
diff --git a/test_project/jquery_support/views.py b/test_project/jquery_support/views.py
@@ -0,0 +1,9 @@
+# Create your views here.
+from cities_light.contrib.autocompletes import CityAutocomplete
+from django.views.generic.base import TemplateView
+
+import autocomplete_light_registry
+
+class JquerySupportView(TemplateView):
+    template_name = 'jquery_support/index.html'
+    pass
diff --git a/test_project/templates/index.html b/test_project/templates/index.html
@@ -11,7 +11,7 @@
             <a href="/admin">admin demos</a> - please log in as test/test
         </li>
         <li>
-            <a href="/non_admin/">non-admin</a> - how to use autocomplete-light
+            <a href="/non_admin/widget/add/">non-admin</a> - how to use autocomplete-light
             outside admin
         </li>
         <li>
@@ -38,5 +38,9 @@
             <a href="/just_javascript/">just javascript</a> - how to create
             a fully-working autocomplete just by javascript at client-side;
         </li>
+        <li>
+            <a href="/jquery_support/">test jquery</a> - how to use django-autocomplete-light
+            with JQuery UI widget library.
+        </li>
     </ul>
 {% endblock %}
diff --git a/test_project/test_project/settings.py b/test_project/test_project/settings.py
@@ -176,6 +176,7 @@
     'support_sandino',
     'default_template_autocomplete',
     'ajax_create',
+    'jquery_support'
 )
 
 # A sample logging configuration. The only tangible logging

diff --git a/test_project/test_project/urls.py b/test_project/test_project/urls.py
@@ -36,5 +36,6 @@
     (r'^i18n/', include('django.conf.urls.i18n')),
     (r'^just_javascript/$', generic.TemplateView.as_view(
         template_name='just_javascript.html')),
+    url(r'^jquery_support/$', include('jquery_support.urls', namespace='jquery_support')),
     (r'^$', generic.TemplateView.as_view(template_name='index.html'))
 )