There probably isnt a good whole tutorial. Which looks at the operation from client side to server side... You should read about writing your own autocomplete field in JS. And for server side look at writing a view which returns a JSON or list of options which corresponds with the JS / JS framework you are using.
I dont think there is a best practice, basically all autocomplete forms are a hack made to look like a menu appearing under a form field. Below is an example using prototype/ scriptalicious client side. Read: http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter Django Forms Component: class MyForm(forms.Form): myAutocompleteField = forms.CharFIeld(max_length=80, required=True, widget=forms.TextInput(attrs={'autocomplete':"off", "onkeyup":"nameOfJavascriptMethod('arg1', 'arg2', this.value);", 'size':'35'})) Template Part of a form template: <noscript> <span class="checkJavascript">Turning on Javascript will help you complete this field by providing suggestions! </span> </noscript> {{form.myAutocompleteField}} <span id="indicator1" style="display: none"> <img src="/images/ajax-loader.gif" alt="Searching For Match..." /> </span> <div id="choices" class="autocomplete"> </div><br /> {{form.myAutocompleteField.errors}} Javascript: function postcodeLocationEvent(txtfieldid, resultsdivid, value) { new_url = '/findmyautocompletestr/'; new Ajax.Autocompleter(txtfieldid, resultsdivid, new_url, { method: 'post', paramName: 'locationinput', minChars: 3, parameters: {'locationinput':value}, indicator: 'indicator1' }); } View: def getLocationViaSuburbOrPostcode(request): #basically whatever you model is storing, some access query probably using startswith or contains loc_af = postcodeorsuburbfind(request) # would be Model.objects.filter(somefield__istartswith=.POST['someParameter']).values('') places = [] places.append('<ul>') if loc_af is None: return HttpResponse(status=500) if len(loc_af) is 0: return HttpResponse(status=500) for l in loc_af: if l.has_key('airfield_name'): if l.has_key('ycode'): #in this example just formatting html to be compliant with the scriptalicious API for autocompleter places.append('<li>%s,%s,%s,%s</li>'%(l['airfield_postcode'],l['airfield_name'],l['ycode'],l['state__state_abbrev'])) else: places.append('<li>%s,%s,ALA,%s</li>'%(l['airfield_postcode'],l['airfield_name'],l['state__state_abbrev'])) else: places.append('<li>%s,%s,%s</li>'%(l['postcode'],l['suburb'],l['state__state_abbrev'])) places.append('</ul>') return HttpResponse(places) Thats absically it. You can choose to write your own JS for the autocompleter, its a lot of work, i wrote my own but current project is using prototype+scriptalicious so i dont bother using it. cheers -sam On Sun, Feb 14, 2010 at 9:46 AM, Jon Loeliger <j...@jdl.com> wrote: > Folks, > > For likely the umpteenth time, can someone recommend a good > AJAX auto completion tutorial or example that I might use > to crib-together a text-field selection that would otherwise > be a very large drop-down selection field? > > My use case would be essentially like having a table full > of say, recipie ingredients, and letting the user select > which one to add into a recipe. I'd like to have the user > simply start typing a few first characters and then let an > autocompleter search for matches and present them to the user. > The source of the matches would be a "Name" TextField in > some model. > > What is the current Best Practice or even Good Advice? :-) > Pros and cons for jQuery or extjs or something else? > A good "How To" or a pointer to a write up? > > Thanks, > jdl > > -- > You received this message because you are subscribed to the Google Groups > "Django users" group. > To post to this group, send email to django-us...@googlegroups.com. > To unsubscribe from this group, send email to > django-users+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/django-users?hl=en. > > -- You received this message because you are subscribed to the Google Groups "Django users" group. To post to this group, send email to django-us...@googlegroups.com. To unsubscribe from this group, send email to django-users+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
