JQueryUI autocomplete full tutorial and demo

JQueryUI autocomplete full tutorial and demo

JQueryUI autocomplete is a functionality offered by JQueryUI wherein you can get suggestions related to your search term in a text input field. This becomes especially helpful if you want to provide a smooth experience to your users.

For developers, this could be a good advantage because this can increase the level of UI experience. For JQueryUI autocomplete mechanisms, data can be set in an array as static source or you can just fetch data from a remote datasource i.e. a database. Both of these prove to be extremely helpful in their respective fields of use.

Static JQueryUi autocomplete procedure is simple to understand and implement as well. Just follow the below mentioned procedure carefully to have a good understanding of the terms and parameters. You can then easily make one for yourself.

Static JQueryUI autocomplete

This procedure involves an array containing the items to be displayed as the suggestion terms in the text box. You can manually create this array with a variety of elements of your choice. All elements must be string. It is advisable to keep strings that start with varied alphabets. Your results would be better.

Once you declare the array, your data set is ready. Just import the JQueryUI source from the JQuery official website in the head region like importing JQuery and your JQueryUI autocomplete is all set to run.

In the script tag, bind the autocomplete function to an input text element and run the file. Cheers! Your work is done! Take a look at the snippet below –

<label>Test</label>
<input id="”test”" type="”text”" />
var tags = [
“HTML”,
“PHP”,
“JQuery”,
“AJAX”
];
$(“#test”).autocomplete({
source : tags
});

So, any matches with the above array elements and the input text is shown as a drop down suggestion list. You can supply as many array elements you want. However, this JQueryUI autocomplete is not feasible when you have a huge sum of data.

Suppose you need to display suggestions of contact numbers of your leads. Is it feasible to create an array in this case? Never is it possible.

So, what we do here is implement the dynamic JQueryUI autocomplete. This procedure provides a database as the data source for autocomplete function.

Dynamic JQueryUI autocomplete

All coding concepts are same with minor changes in the specifications.

$( "#test" ).autocomplete({ 
source: "search.php",     // provide the name of the PHP source file here
minLength: 1,    
 select: function( event, ui ) { 
} 
});

The above code is very clear.

“source” specifies the PHP file URI that queries the database and returns results

“minLength” specifies the minimum letters after which suggestion starts

“select” specifies the event which is fired when the user selects a suggestion term. You can specify a callback function here if you want.

The PHP file shall contain the following –

$term = $_GET['term'];         // autocomplete sends data as $GET

$query = "SELECT name, number FROM users WHERE number LIKE '%$term%'";
			$result = mysql_query($query) 
			or die();

$record = mysql_fetch_array($result);

echo json_encode($record);           //encode the result as JSON before sending

That is all. Try for yourself and feel free to comment and notify me in case of any glitches. All the best!

  • Muddser

    Thanks a million for this… u ended a month long search of mine… but one thing I wanna ask… I want that in search.php it should output all the names in the table users for the queried letters… I.E. when I type “mo” then it should give in the dropdown all the names from my table users that contain “mo”… but right now it’s displaying only the 1st entry in the database table… please help…

    • Hi, Thanks for going through my article.

      Well, the problem you are saying could be because of two reasons.

      First, if your suggestion list is showing one and only one result (the first record in the database) – then the problem is that the query is selecting multiple rows, it’s fetching all the rows – but one at a time. So, all gets overwritten and only the last record i.e. the first database record is shown. Maybe you are using

      $record = mysql_fetch_row($result);

      instead of

      $record = mysql_fetch_array($result);

      Second, if it is like, your results show but they are only showing words which START with “mo” and not words that have “mo” somewhere in the middle. Then check your query – it should be – [ WHERE number LIKE ‘%$term%'” ]. So, the wildcard % on both sides of $term.

      If still your problem persists, then I must see your code to have a detailed idea.

      Do let me know.

  • E.Martins

    Well, come on!
    is the following tried modify and adapt this code for my needs but I came across a problem I can not solve is the following.

    was as follows () I made were saved by this research field, but when we insert the form it does not return to search for the file responsible for writing the database “save.php”, I found another problem and that if we repeat the same word he is memorizing her every time we send the content through the countryside, I wonder since is your altoria this code has to solve these little problems.

    thank you for your attention!

    • HI @disqus_81ZHzklHYi:disqus, thanks for stopping by and letting me know your views. I did understand what you meant in your second issue. But the first one I did not understand, The second issue can be solved easily. In the PHP file (that the JQuery AJAX method is accessing to write to database), when forming the SQL INSERT query, check whether the data already exists in the table or not. When this validation is done, duplicate data won’t be saved.
      I will update this to the demo immediately. Please describe your first issue a bit more clearly. Thanks. :)

      • E.Martins

        well come on, regarding the first question is that it excludes the input memorized the independent items and left only what research shows to also remember what it is searched, so far so good my problem is that when I insert the the “text” field to memorize what is research and so displays previous inplantação the form of results.

        wanted to know if it has the same form as continuamemorizando.

        Thank you!

        • I hope your second issue is solved. I still can’t understand what exactly your first issue is. If you are having a problem with the autocomplete code not working on your custom element. Please refer to the code and see how I implemented it on a text element. Another thing is, as far as I could understand from your comment, if you want the autocomplete drop down list to memorize the previous searches made; that;s beyond the scope of this tutorial. This tutorial focuses on creating a drop down list from the database existing record. This list is dynamically being prepared each time according to the input string. The search in the database is according to the input string. The list is prepared from the search results. So previous search results shall not be shown in the list.

  • E.Martins

    See what I was saying earlier, I modified a few things, follow link:
    http://www.veloxpage.net/autosugest/