/ Coding

Application: Bcomplete

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.

Update 5/12/20017:

BComplete 1.2 is available, with support for asynchronous data loading. This is not traditional AJAX, as it doesn’t perpetually poll the server for new data, but it does relieve the client of the slight page-loading delay caused by embedded Javascript arrays. It also saves developers the pain of embedding those arrays into their HTML if they find it cumbersome or unclean. Read the “Usage” section below for details.

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.

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.

Additionally:

  • 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.

Usage

To use BComplete, link to the included .js and .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 setData or loadData methods.

For example:

var colors = ['Red','Orange','Yellow','Green','Blue','Purple'];                    
var complete = new BComplete('inputTagID');
bcomplete.setData(colors);

or

bcomplete.loadData('../files/list.txt');

In the case of loadData, the given path should point to a remote text file that should contain only a single Javascript array. For example:

['Yellow','Green','Blue','Purple']

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.

Upcoming Features

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 down arrow ) is not intuitive enough.