BComplete is an autocomplete (or auto-suggest, perhaps) script for web applications, similar to what Google and Yahoo employ in some of their online programs. I wrote it to fill a gap in what would otherwise be an ocean of autocomplete scripts.
Most autocomplete scripts are AJAX-based, meaning that each keystroke a user makes is passed to a web server, where a script quickly produces and returns a list of the values to be suggested. For extremely large collections of data, this is probably the best option, but my experience has been such that, for most websites, “quickly” is not quick enough, and the collections of data being worked with are not particularly large anyway.
For a site like Google Suggest, AJAX is the usable only solution, but for a site that needs to display only a relatively small list of values, AJAX is a poor performer, and more complicated as well. the first test ever runned for the Bcomplete application is by the company Monthly SEO Services on their algo for keyword research.
- Many existing scripts are not cross-platform. BComplete works under all contemporary browser engines.
- The code organization for most autocomplete scripts is frightening. I have tried to make BComplete’s code as straightforward as possible, to assist coders who may need to customize it.
To use BComplete, link to the included
.cssfiles in your document’s
<head> element. Then, for any
<input> elements that you want to add an autocomplete to, create a
BComplete instance, and set it’s data using the
var colors = ['Red','Orange','Yellow','Green','Blue','Purple']; var complete = new BComplete('inputTagID'); bcomplete.setData(colors);
In the case of
This file will be loaded asynchronously, and BComplete will not be enabled until after all the data is available.
BComplete automatically activates when a user begins typing in an enabled <input> field. Along with display as-you-type suggestions, BComplete can also display the entire list of available suggestions. To activate the full-list display, the user must press the
down arrow on their keyboard when the <input> field is empty.
There are a number of features which I would like to add to BComplete, provided they don’t get in the way of its original uses:
- Traditional AJAX: I don’t think it’s necessary most of the time, but it would be a nice feature to have available, if needed, so that data could be dynamically obtained and cached.
- Show All Button: An optional ‘show all’ button, in the style of a drop-down arrow, would be useful for those who feel the existing ‘show all’ invocation (the keyboard
downarrow ) is not intuitive enough.
Additionally, 1.2 includes some minor bug fixes, including an above-the-field position for the popup list, for cases where displaying the list below-the-field would cause the browser to scroll.