Last Autosuggest Article

The last part of the three-part article series on creating an autosuggest textbox is now available over at WebReference. I apologize for the long delay as I had no control over when the article would get published; I only pass it in and the editors decide when it runs. But hey, it’s not like I’m George Lucas and waited 20 years to publish the last part. :)


  1. Bill

    I wanted to thank you for your great Autosuggest article. I was so impressed with Parts 1 & 2 that I adapted it to an ASP.Net implementation using AJAX.

    Thanks again,

  2. Nicholas C. Zakas

    Bill: I&#039m glad you enjoyed it. Most people mistakenly think that I write these articles to give away code, but what I actually try to do is give a demo of some technology in the hopes that someone will build upon it. I&#039m very excited to see that you did exactly that. Very cool!

  3. Keith

    Great article, Nicholas. The hosted example is a little buggy, though -- there seems to be a timing issue in there. If I type "mi" very quickly, or very slowly, it does the right thing, but if I type it somewhere in between, it autocompletes to "maine" (the first &#039m&#039 result), then adds &#039i&#039 to the end of that.

    I haven&#039t tried debugging it yet, since timing issues are virtually impossible to trap in a debugger, but at a quick glance, it looks like you need atomicize the act of incrementing the user string length when a key is typed, and changing the user string to be the first # keys actually typed, rather than the first # characters of the suggested value. So if I time it right between the "m" and "i", it thinks I&#039ve typed two characters, but the two characters it believes were entered are "ma", which auto-expands to the only acceptable value of "Maine".

    That first A in AJAX is a tricky one.

    Otherwise, great job -- and thanks for using PHP in your article rather than ASP. (Nothing against ASP, this just makes it easier for me to start using it right away! ;-) )


  4. Nicholas C. Zakas

    Keith: Alas, this is a limitation of the demo version I developed on WebReference. In actual usage, you&#039d need to provide a timeout of some sort to account for people who type quickly (this is what Google Suggest does). I always try not to give away all the tricks in my articles, and leave just enough room for people to find problems and fix it (not unlike a Persian flaw).

  5. Anonymous

  6. Ryan

    Your article was great. I&#039ve looked through a lot of tutorials and articles on autocomplete / auto suggest / livesearch, and yours is by far the most clear.

    One oddity though... In Safari, the suggestions box is offset, hovering halfway over the input box. And instead of moving to the next selection, Safari skips one... only selecting every other one.

    It looks great in FireFox though.

    I expect this bug is due to the css on the suggestion box.

    I believe the solution might be to print to an existing div (getObject) in the html rather than a javascript created div.

    Any other ideas?

  7. Ryan

    Ah, it looks like this is only the beginning... Safari also doesn&#039t recognize the onmouseover event in your script.

    I&#039m not too handy at Safari js issues, any thoughts?

  8. Nicholas C. Zakas

    Sorry Ryan, I don&#039t even have a Mac to check these issues out!

Understanding JavaScript Promises E-book Cover

Demystify JavaScript promises with the e-book that explains not just concepts, but also real-world uses of promises.

Download the Free E-book!

The community edition of Understanding JavaScript Promises is a free download that arrives in minutes.