Django AutoComplete Solutions

140 views
Skip to first unread message

Bryan Landers

unread,
Jul 17, 2009, 5:13:44 PM7/17/09
to djangola
Ok, maybe I'm getting greedy today, but those responses for search
solutions were so great, I can't resist asking another!

What are your favorite options for autocomplete in Django projects?
YUI? jQuery? Custom?

The site I'm working on uses YUI only for resets and fonts, so YUI
autocomplete might be a little heavy. We call in jQuery on all pages,
so that's a strong candidate.

Below are some links I've been looking at in my research.

jQuery-based:
http://www.djangosnippets.org/snippets/233/
http://lethain.com/entry/2007/dec/01/using-jquery-django-autocomplete-fields/
http://www.djangosnippets.org/snippets/1097/
http://stackoverflow.com/questions/738529/anybody-who-have-used-django-and-jquery-autocomplete

YUI-based:
http://www.djangosnippets.org/snippets/392/
http://code.djangoproject.com/wiki/YUI-Django-AutoComplete

And if I can't decide, this one uses both!
http://bitbucket.org/tyrion/django-autocomplete

Thanks for your input, everybody.
Bryan

Dirk Neumann

unread,
Jul 17, 2009, 6:08:14 PM7/17/09
to djan...@googlegroups.com
It probably depends on what you want to do. If you just have a single
or a few fields, a custom, jQuery-based approach is probably easier
than maintaining special widgets.

At voicebeep.com we have a URL that lists all the emails that you have
used in the past and jQuery calls it automatically. For non-email
fields, we rely on the browser's auto-complete capabilities.

Bryan Landers

unread,
Jul 17, 2009, 6:43:10 PM7/17/09
to djangola
Thanks, Dirk. Yeah it's only a couple of fields (never more than 1 on
the same page, I think). I'm leaning towards jQuery with ajax POST
request to a url that returns a JSON string as a response. The use
case is to both help and error check user input for things like
academic institutions. Like Facebook does when you enter the college
you attended.

I sent Eric a beep earlier today ;)
Congrats on getting Voicebeep into the App Store!
Bryan

On Jul 17, 3:08 pm, Dirk Neumann <d...@caltech.edu> wrote:
> It probably depends on what you want to do.  If you just have a single
> or a few fields, a custom, jQuery-based approach is probably  easier
> than maintaining special widgets.
>
> At voicebeep.com we have a URL that lists all the emails that you have
> used in the past and jQuery calls it automatically.  For non-email
> fields, we rely on the browser's auto-complete capabilities.
>
> On Fri, Jul 17, 2009 at 2:13 PM, Bryan Landers<bryanland...@gmail.com> wrote:
>
> > Ok, maybe I'm getting greedy today, but those responses for search
> > solutions were so great, I can't resist asking another!
>
> > What are your favorite options for autocomplete in Django projects?
> > YUI? jQuery? Custom?
>
> > The site I'm working on uses YUI only for resets and fonts, so YUI
> > autocomplete might be a little heavy. We call in jQuery on all pages,
> > so that's a strong candidate.
>
> > Below are some links I've been looking at in my research.
>
> > jQuery-based:
> >http://www.djangosnippets.org/snippets/233/
> >http://lethain.com/entry/2007/dec/01/using-jquery-django-autocomplete...
> >http://www.djangosnippets.org/snippets/1097/
> >http://stackoverflow.com/questions/738529/anybody-who-have-used-djang...

Jeremy

unread,
Jul 17, 2009, 6:49:05 PM7/17/09
to djan...@googlegroups.com
You guys get to work on such cool stuff.

~ Jeremy

Marcel van Eck

unread,
Jul 17, 2009, 7:29:29 PM7/17/09
to djan...@googlegroups.com
Brian,

I have been using jQueryAutoComplete for some time.
The widget python code below is based loosely on some of the snippets
you have linked below.

Marcel


class EmployeeAutoComplete(forms.TextInput):

def __init__(self, source, options={}, attrs={}):
"""source can be a list containing the autocomplete values or a
string containing the url used for the XHR request.

For available options see the autocomplete sample page::
http://jquery.bassistance.de/autocomplete/"""

self.options = None
self.attrs = {'autocomplete': 'off'}
self.source = source
if len(options) > 0:
self.options = JSONEncoder().encode(options)

self.attrs.update(attrs)



def render_js(self, field_id):
if isinstance(self.source, list):
source = JSONEncoder().encode(self.source)
elif isinstance(self.source, str):
source = "'%s'" % escape(self.source)
else:
raise ValueError('source type is not valid')

options = ''
if self.options:
options += ',%s' % self.options

return u'$(\'#%s\').autocomplete(%s%s);' % (field_id, source,
options)



def render(self, name, value=None, attrs=None):
final_attrs = self.build_attrs(attrs, name=name)
lookup_attrs = self.build_attrs(attrs, name=name)

if value:
person = Employee.objects.get(id=value)
lookup_attrs['value'] = escape(person.name)
key_value = value
lookup_value = escape(person.name)
else:
key_value = ''
lookup_value = ''

if not self.attrs.has_key('id'):
lookup_attrs['id'] = 'id_%s_lookup' % name
final_attrs['id'] = 'id_%s' % name

return mark_safe(u'''
<script type="text/javascript">
$().ready(function() {
$("#%(field_id)s_lookup").result(function(event, data,
formatted) {
if (data) document.getElementById("%(field_id)s").value
= data[1];
});});
</script>
<input type="text" autocomplete="%(field_auto)s"
name="%(field_name)s_lookup" id="%(field_id)s_lookup"
value="%(lookup_value)s"/>
<script type="text/javascript">
<!--//
%(js)s
//-->
</script>
<input type="hidden" id="%(field_id)s" name="%(field_name)s"
value="%(key_value)s"/>
''' % {
'key_value' : key_value,
'lookup_value' : lookup_value,
#'field' : attrs['id'],
'field_name' : final_attrs['name'],
'field_id' : final_attrs['id'],
'field_auto' : final_attrs['autocomplete'],
'js' : self.render_js(lookup_attrs['id']),
})

Bryan Landers

unread,
Jul 17, 2009, 8:13:57 PM7/17/09
to djangola
Thanks, Marcel. I'll give your code a shot for sure.

Re: Jeremy - I'd say this copy you wrote is cool stuff: http://bit.ly/uFTo9
Bryan
Reply all
Reply to author
Forward
0 new messages