jquery is the best

2 years ago my company required an autocomplete function for their search function inside their application.

Initially there was one real option, to use the Yahoo autocomplete utility. Well sadly this turned out to not be the best option. In fact most of our customer's ended up turning off the autocomplete function.

Over this year I actually decided to learn javascript and I stumbled across http://www.jquery.com/. I went practically overnight from novice programmer to being able to write an autocomplete tool that was guided towards exactly what our customers wanted, and had features that I have not seen in any other autocomplete solution so far.

So what is "unique", and why did Yahoo's autocomplete tool not fit the bill.

Well I will start off with the problems with yahoo's tool
  • It is designed as an Autocomplete, what we really required was an "autosuggest"
  • It created javascript errors intermittently when connecting to the data source, this would throw up a javascript debugger message if IE was configured to display javascript debugger messages. Our customers lacked the expertise to uncheck the check box and so our support department would get inundated with calls about this... (please note that the examples they have on their website also throw these connection errors intermittently, and so I do not feel it is my implementation of their code)
  • It was difficult to customise given the complexity of the code (especially as 2 years ago I knew nothing about javascript, I only began programming less than 3 years ago so...)

The unique element

  • The list needed to be able to handle multiple words in an single input box and run queries against appropriate replacements for each word in the phrase (yahoo does handle this, but not exactly as we would like)
  • It needed to be a suggested list rather than forcing a choice of the word
  • It needed to help illustrate spelling mistakes, which we do by turning the text red if the word typed is not in the returned list
  • Yahoo's list was sending too many queries, we built in a delay based on typing as to prevent pointless requests for the word list. Many of our customers have surprisingly poor networks and even sending small amounts of data can take a long time. Essentially as you type the javascript waits 100ms and then if you have not typed anything further it requests the list, each time you type it resets this timer. Experimentation has shown that this option works well.

You would not believe how easy this was to write in jquery, in fact I honestly believe that this is how javascript should always be written, it makes javascript so simple, and offers much easier cross-browser support. I hope to at some point to be good enough to write a plugin offering this type of autosuggest, as I do not feel our criteria for an autosuggest is as unique as it appears to be base on the offerings of other programmers...

Comments

Popular posts from this blog

IE9 Intranet compatibility mode in Intranet websites

User Interface Usability Checklist Part 2

Procedural VS Object Oriented