Autocompleter.Gears

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.

Autocompleter.Gears

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;
}

2 Comments

  • Michael says:

    hey there.
    is/how is it possible to use data of an MySQL Database with your script?

    regards

    • Dan says:

      Michael,

      Basically, you would have to dump the data out of MySQL into Google Gears’ sqlite database to use my plugin. If you want to do it directly from the MySQL database, you would use an Ajax call to a script that would return the pertinent data.

One Trackback/Pingback

  1. [...] 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 [...]

Leave a Reply

Your email is never published nor shared. Required fields are marked *
*
*