Autocompleter.Gears is an extension for the Autocompleter built into Script.aculo.us. It allows you to create an autocomplete control from a database table cached to the user’s computer using Google Gears. In my very unscientific tests, I’ve seen a 4-10 times increase in speed over Ajax.Autocompleter over a local network.
Basic Example
The example below will search the Surname field and return only that column in the autocomplete options.
new Autocompleter.Gears("autocomplete", "autocomplete_choices", { database : "lookups", table : "employees", field : 'Surname' });
Advanced Example
This example shows how you can choose which fields come back in your choices and even lets you search on more than one field. Remember that this searches with a wildcard, so you can string fields together for the SQL. The sqlite concatenation operator is “||”.
new Autocompleter.Gears("autocomplete", "autocomplete_choices", { database : "lookups", table : "employees", field : 'Surname || ", " || GivenName', format: "#{Surname}, #{GivenName} #{MiddleInitial} });
CSS
div.autocomplete { position:absolute; width:250px; background-color:white; border:1px solid #888; margin:0px; padding:0px; } div.autocomplete ul { list-style-type:none; margin:0px; padding:0px; } div.autocomplete ul li.selected { background-color: #ffb;} div.autocomplete ul li { list-style-type:none; display:block; margin:0; padding:2px; height:32px; cursor:pointer; }
One Trackback/Pingback
[...] Autocompleter.Gears This entry was written by Dan, posted on June 7, 2008 at 8:58 pm, filed under Web and tagged Google Gears, Javascript, Prototype, Scriptaculous. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « We survived [...]
Post a Comment