Cross-browser auto-suggest using jquery ui

You might say this is yet another auto-suggest tutorial if you have read the last one that I have wrote:

How to use php and datalist for easier auto-suggest input field

And countless others in the blogosphere. This time around, I want to show you how to do it using jquery ui. And because its through the use of a framework. You might say that this will be cross-browser. And it works on every MODERN browser that you can think of.

 

Requirements

  • jquery core
  • jquery ui

 

Procedure

First, link the jquery  and jquery ui javascript files on the file that you’re going to use.

<link rel="stylesheet" href="../css/jquery_ui.css"/>
<script src="../js/jquery.js"></script>
<script src="../js/jquery_ui.js"></script>

It’s a good practice that css comes first when linking files. Its because its FASTER to load css files than javascript files.  Just Google it to have some proof. Because I currently do not have the link for it.

Second, build your forms:

<p>
    <label for="product">Product:</label>
    <input type="text" name="product" id="product">
</p>

Third, create another php fille. This will be used as the data fetcher. In other words, this file will be used to fetch the items for our auto-suggest text field.

<?php
require_once('store_config.php');
?>

<?php
$prods = $db->get_results("SELECT * FROM tbl_products");
foreach($prods as $p){
	echo $p->str_productName.';';
}
?>

Here’s a summary of what we did in the above code:

  • include database configuration file
  • fetched all the records from the tbl_products
  • loop through those records and output them. Using a semi-colon as a separator.

 

Fourth, declare an array that will hold the values fetched from the php file for fetching records. Then make an ajax call. Specify the url, and the action that you want to perform once the data is fetched.

$.ajax({
    url: "search.php",
    success: function(data){
    prods = data.split(';');
}
});

The name of the file for fetching data is search.php. If you have used a different filename for your data fetcher then replace search.php with the filename.

The callback function for the attribute success, will have a default parameter which contains the data that was fetched. It can be any name you want. In this case its called ‘data’.

Then we just use the javascript split() function. Which is like the explode() function in php. This will convert a long string of text into an array.

We need to convert it to an array because the auto-suggest/ autocomplete function for jquery ui uses array as a data source.

This will mean that the variable prods now contains an array of of the product names that we have on the database.

Finally, execute the autocomplete function everytime a focus event on a text field happens:

$('input[type=text]').focus(function(){
    $("#product").autocomplete({
    source: prods
});
});

 

Conclusion

I guess that’s it for this short tutorial. You have learned how to make use of jquery ui to create a cross-browser implementation of auto-suggest text field.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s