[DHTML] AutoComplete with AJAX

[BYK]

1) CODE TITLE: autoComplete

2) AUTHOR NAME/NOTES:BYK

3) DESCRIPTION:

This script allows you to add auto complete functionality to any text input on your web site. It uses the CSS-JSON hybrid system to allow you to easly set both the elements you want to be auto completed and their auto complete settings. This system is the same as in the thread Extremely Easy In-Place-Editing (http://www.dynamicdrive.com/forums/showthread.php?t=31759).

A quick tutorial is on its way but you can understand how to use it at the first glance to the code of the demo page. Although, if you have any questions, do not hesitate to ask.

4) URL TO CODE:
http://amplio-vita.net/zip/JSLib/js
http://amplio-vita.net/JSLib/css/aV.plg.autoComplete.css for the css.
http://amplio-vita.net/zip/JSLib for the whole JSLib project including the documentation.

5) URL TO DEMO PAGE:
http://amplio-vita.net/JSLib/demos/autoComplete/autoComplete.htm
http://amplio-vita.net/zip/JSLib/demos/autoComplete to download the demo completely(including the php and the list files, excluding the code)

Any suggestions and comments are greatly appreciated :)

[jscheuer1]

It seems to work. My first name, which is very common in the States here and in many other places, isn't supported though. That doesn't bother me. It does point to an obvious weakness in this approach though. That is in order to have a reasonably complete list of available first (or last) names for even a national audience, let alone an international one, the list would be huge, and many of the drop downs would be huge too. There is another. As soon as I typed in the first letter, my browser offered a suggestion. By choice, I limit what my browser can suggest to only one possibility in most situations, but most people's browsers are not restricted in this manner. So I envision that many folks would be looking at competing lists, their own and yours.

[BYK]

Thank you for your comments John :)
First of all, the list has a "max-height" property, and it is pretty easy navigating in it. It also filters immediately when you enter another character, and it filters with Javascript once it knows that the part you have typed is enclosed by the fetched data. For example if you first wrote "Jo" and then pressed "h", it knows(:P) that the words starting with "Joh" is already in the list of the words that are starting with "Jo". Also the system works with any text based response so that you can use a database behind. And the issue that your name isn't supported, well, these were imaginary names so I think nobody's name will be in the list :D

And for the browser's auto complete issue, you are absolutely right and I'll be looking for a solution for that. Since I never use that feature, I never realized such a problem.

Thank you very much again :)

[BYK]

A late reply but, added a line of code which automatically disables tha auto complete fields' browser auto complete feature as John suggested.

Also added support for custom regular expression per field so that now you can define any match pattern for the script to automatically suggest and you can do this per field basis.

Waiting for your comments! :)

[neelchauhan]

When I was looking for AJAX Autocomplete, I always got bad ones. This one is very cool. I would like it for my search engine!
http://www.kellie.de/fm1/fm_hands.jpg

[BYK]

Thank's for your compliments :)

By the way a minor update has been made to improve both the code quality and browser compatibility. (The previous version could cause some errors on IE6)

[BYK]

Hi again everyone,

I have made some improvements on the script and also prepared a new, advanced demo which takes the cursor's position in the input field in account while determining the suggestions. So, please have a look at it at http://amplio-vita.net/JSLib/demos/autoComplete_advanced and post your comments and suggestions.

Thank you :)

[Tohaki]

That is a very nice functionality, BYK. :)


A quick tutorial is on its way but you can understand how to use it at the first glance to the code of the demo page.That would be very helpful.

[BYK]

Hi Tohaki,
Thanks for your response. http://code.google.com/p/av-jslib/wiki/aVaParser would help you(it is very short in fact) to fully understand our new way of initialization. If you have any questions, please ask.