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

Post a Comment

Popular posts from this blog

IE9 Intranet compatibility mode in Intranet websites

So you have written an HTML5 site on your local intranet with some lovely CCS3 and run it up in Firefox and you feel smug, all your HTML and CSS are perfectly formed, but you run it up in IE9 and all the CSS3 goodness has gone away leaving your lack luster IE7 version of your site.   Why is IE9 running in IE7 compatibility mode? IE9 has a hidden setting that forces it to run in compatibility mode when it encounters any intranet websites. Microsoft have detailed this behaviour in a Blog about what they call Smart compatibility mode . You can easily switch off the compatibility mode for specific machines using the internet tools mentioned in the article above, but most of the time developers do not have the luxury of applying corporate wide settings of this nature. Avoiding Smart compatibility with X-UA-Compatible Luckily there is a single line of HTML you can that you can use to override this behaviour: <meta http-equiv="X-UA-Compatible" content="IE=edge,c
Read more

User Interface Usability Checklist Part 2

So you made it through part 1 of the usability check list, how about part 2? 21. Poor Label Alignment If you have been through design 101 you have probably heard of the wonderful acronym for the basic principles of design, C.R.A.P. This of course stands for Contrast, Repetition, Alignment and Proximity. Proximity is very important when identifying which label belongs to which input. Each different form of alignment has its advantages and disadvantages. Left Alignment The label appearing on the left of a box is a common practice. This often helps with vertical space and keeping all of the elements of a form on a single page, which can be beneficial in aiding the user in form completion and making them aware of all of the possible options they can, or made need to provide information for. It does however have a few disadvantages. Long labels cause short label's input boxes to be far away from the end of the label, this damages that basic principle of proximity. In extreme
Read more

Procedural VS Object Oriented

What is the correct way to write code? If you have worked with PHP long enough you may well have come across the website  PHP The Right Way . This website is dedicated to helping developers learn the industry best practices. Interestingly another site appeared afterwards called  PHP The Wrong Way . In essence this website is a rebuttal to the many of the recommendations made in PHP The Right Way. With any sphere of learning it is important to keep an open mind, to listen and critically evaluate the received wisdom and determine if it is indeed wisdom or opinion built on shaky ground. There is one part of the argument I would like to focus on and this is the argument for and against " Always use object-oriented Programming ". While PHP The Right Way does not appear to explicitly state that you should always use an object oriented approach it is implicit from the examples and the recommendations to use design patterns. While there are programming approaches available othe
Read more