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']),
})