Best jQuery PHP Ajax Autosuggest Script, best for developers & designers ...

There are two functions in the block of code below. the first one ’suggest’ performs the ajax request based on the users input into the text field which is passed into the function when the function is run. We reference the input with the variable ‘inputString’.

the first section of code is a simple if statement to check if the length of the users input in the text box is more than 0. If it is we run the ajax request to get the list of suggestions from the database. #country refers to the id of the text input in our form. You can see that we’re adding the class ‘load’ to the text input. This is to display an animated loading gif to show the user that we’re getting data from the database.

We then use ‘$.post’ to post the users input text to the ‘autosuggest.php’ page for processing. The autosuggest.php page simple returns a result based on a LIKE % sql query.

Once we have data back from the ‘autosuggest.php’ file, we fade in the suggestion box and inject the contents into the ‘#suggestionsList’ div using ‘.html’. We finally remove the ‘load’ class which removes the animated loading gif.

The function ‘fill()’ populates the text input field with the users selection if they click in a country from the suggested list, it then fades out the ‘#suggestions’ div removing it from the page.

01.function suggest(inputString){
02. if(inputString.length == 0) {
03. $(#suggestions).fadeOut();
04. } else {
05. $(#country).addClass(load);
06. $.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
07. if(data.length >0) {
08. $(#suggestions).fadeIn();
09. $(#suggestionsList).html(data);
10. $(#country).removeClass(load);
11. }
12. });
13. }
14. }
15.
16. function fill(thisValue) {
17. $(#country).val(thisValue);
18. setTimeout("$(#suggestions).fadeOut();", 600);
19. }

The HTML

This is the HTML needed to get the autosuggest feature working. Its a simple form, with a text input with an onKeyup and onBlur attribute. The suggestion box with arrow is situated below the form input and positioned absolutely relative to the div suggest.

1.<form id="form" action="#">
2. <div id="suggest">Start to type a country: <br />
3. <input type="text" size="25" value="" id="country" onkeyup="suggest(this.value);" onBlur="fill();" class="" />
4. <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
5. <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
6. </div>
7. </div>
8.</form>

Included in the download package is the database .sql file needed to create the table to search from. You could however modify the SQL query to point to a different table. The database connection details are also declared at the top of the autosuggest.php page however it is advised to abstract these from the page.

 Original Source:
http://guidesigner.net/ajax/best-jquery-php-ajax-autosuggest-script-best-for-developers-designers/