[development] "Subclassing" the standard #autocomplete form

Rob Thorne rob at torenware.com
Sat Jan 20 01:08:41 UTC 2007


The country example was just an example; I'm aware there are nicer ways 
to do country selection.

I'm actually most interested in autocompleting from much larger sets, 
such as a voter file with thousands of records. I want the user to type 
a name, but get back the internal ID used to access that voter's 

For now, I'm doing what the CCK people are doing with their 
nodereference code. It's a bit of a hack (you append the $nid at the end 
of the string like this:

    Autocomplete Widget: This Is The Title Of My Node [NID]

The submit code parses off the NID and throws the rest away. My Voter ID 
example would work the same way.

The non-JavaScript code for this sort of thing embeds a look-up form 
where the AC widget would be. This is ugly, but the advantage of 
autocompleting is so great in this case that it's worth the effort.

Some AJAX frameworks have a "combo-box" object that does exactly what I 
want to do here. I suspect there's some way to do this with JQuery, but 
since I'm just getting started with it, I'm open to suggests how this 
would work.


Steven Wittens wrote:
>> An example of the type of widget I'd want would be a "Country Selection"
>> widget where what I really want is the two-character country code (US,
>> CA, GB, FR, and so on), but I want the user to think of typing "United
>> States", "Canada", "Great Britain", "France" or so on in order to get
>> the popup to get set on this code.
> Why do you need to submit the country code through the form? If the 
> autocomplete is smart enough to change "Canada" into ".ca", then the 
> code that processes the form can do so too.
> Various requests have been made top make the autocomplete 'smarter', 
> by letting the displayed value be different from the submitted value. 
> Usually, this is an abuse of the autocompleter that would be better 
> solved by custom code, and it doesn't degrade without JavaScript at all.
> As far as subclassing autocomplete, the menu scout module does 
> something like this. But I would only do it if you need significantly 
> different behaviour.
> Here's how I would do it:
> - Make the text field always take a country name. It is the most 
> user-friendly input format.
> - When the user types something, it does an ajax request to the server 
> to look up the country and its code. If it is found, it is returned in 
> a list that shows "Country (country code)" e.g. "Belgium (be)". 
> Clicking a suggestion will fill in "Belgium", not "be".
> - When the user submits the form, the field value (country name) is 
> compared to the database and the first match is used.
> - If nothing matches, a validation error is thrown. This applies both 
> to JS and non-JS, as you can still type in random crap.
> For JS users, they get a nice, user-friendly direct autocomplete. 
> Non-JS users just have to wait for the whole form to submit instead, 
> but still get completion and validation.
> To really spice it up, you can use a suffix unit on the autocomplete 
> field to display the country's flag, when found.
> Steven Wittens

More information about the development mailing list