6

Does anybody know how to implement the jQuery autocomplete plugin in Django, using databases instead of local values?

Specifically I want to implement the "Search Page Replacement" feature mentioned at bottom of the page, the dataset will be approx a thousand or more entries, but I cannot workout how to get it to interact with the necessary fields of my database.

(Am also on the lookout for a good Python/Django search solution to use for my site - which is just a very simple website.)


Thank you for your help.

Jon Cox
  • 10,622
  • 22
  • 78
  • 123

1 Answers1

12

I rencently did something with jQuery.autocomplete with one model.

funcionality of seach city when user starts to write the name:

according the jqueryui docs to make work the autocomplete you need an input like this:

<input id="n" type="text" name="n"/>

so, the javascript in my template to attach the lib to this input looks like:

$(document).ready(function(){
     $( "input#n" ).autocomplete({
                            source: "{% url autocomplete_city %}",
                            minLength: 2
        });
});

to resolve that URL you have to write something like this in your urls.py

urlpatterns = patterns('cities.views',
    url(r'^autocomplete_city/$', 'autocomplete_city', name='autocomplete_city'),
)

that mean that I have something like cities.views.autocomplete_city view:

def autocomplete_city(request):
    term = request.GET.get('term') #jquery-ui.autocomplete parameter
    cities = City.objects.filter(name__istartswith=term) #lookup for a city
    res = []
    for c in cities:
         #make dict with the metadatas that jquery-ui.autocomple needs (the documentation is your friend)
         dict = {'id':c.id, 'label':c.__unicode__(), 'value':c.__unicode__()}
         res.append(dict)
    return HttpResponse(simplejson.dumps(res))

what else de you need? start testing and remember DOCUMENTATIONS ARE YOUR FRIEND please TRY to make the things for yourself first, google it, read the docs, try 3 times, if cant, stackoverflow is your friend.

panchicore
  • 11,451
  • 12
  • 74
  • 100
  • This is for jqueryUI autocomplete, not the plugin he's linking to, but nice post regardless. I would recommend he use jquery UI as well! Jonathan, if you want to use that plugin, the only changes you have to make is that the GET param is 'q', and the result should be plaintext key value pairs separated by `|` with each pair on a single line. – Yuji 'Tomita' Tomita Feb 12 '11 at 21:32
  • Thanks for your answer. I have attempted to use Jquery, but currently I'm really struggling to get it to use the remote source properly. I can get it to use local data, but when I change source to a url (of a view) it never accesses that view. Can you possibly think of any reason for this? – Jon Cox Feb 16 '11 at 18:20
  • Have made a separate question for the issue I mentioned above: http://stackoverflow.com/questions/5020844/jqueryui-autocomplete-with-url-as-source-am-using-django – Jon Cox Feb 16 '11 at 19:03
  • I see that the dict has keys like `id`, `label`, `value`. How do I say, print to console, the id, corresponding to the database ID of the selected element? This is important because I use the ID to filter other requests. I tried `console.log($("#myinput").id)` but that did not help. Thanks. – Shailen Sep 13 '13 at 11:17
  • The following SO question answered my question above: http://stackoverflow.com/questions/4895748/how-to-set-id-in-jquery-ui-autocomplete-source-event – Shailen Sep 13 '13 at 14:02