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

In this tutorial, I’m going to show you how you can add an auto-suggest functionality to a text field. Which loads the data from a mysql database. For those of you who aren’t updated on the new form features in html5. Datalist are one of them. And at the time of writing of this tutorial only works on Firefox 4, 5 and Opera 10, 11.

Here’s a neat demo at wufoo.com:

http://wufoo.com/html5/attributes/05-list.html

Go ahead and try that on the browsers I mentioned a second ago. It won’t work in Safari, IE, and Chrome at this point in time.

Okay, so back in the main topic of this tutorial. Here are the requirements.

Requirements

  • Browser with support for datalist
  • Web server (Wampserver will do if you’re on Windows)

 

Assumptions

As usual, the assumptions depends on the requirements. You must at least know the basics of php, and mysql. The most important is that you already know how to perform mysql queries from a php script and output the data in the browser.

 

Procedure

First, you have to import your database configuration to the file that you are working on:

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

Note that I am using the ez sql library so the code might look a bit different for you. If you are using the common mysql_query() or mysql_num_rows() to communicate with the mysql database.

Next, perform a query which will check if there are actually records in the table. So that we won’t be wasting server resources fetching data which doesn’t even exist:

$res_num = $db->query('SELECT barangayID, barangay FROM tbl_barangay');

The variable $res_num will have a value greater than 0 if the query returned 1 or more results.

Next, perform the query which will get results from the table. The get_results() function in ez sql will just return an array of the records which was fetched by the query.

$sel_brgy = $db->get_results('SELECT barangayID, barangay FROM tbl_barangay'); 

Let’s pause with this queries for a while and create the form fields which will be used by the user. We added an autocomplete attribute and set it to off. This is to prevent the autocomplete built-in feature in the browser from messing with our beautiful auto-suggest feature.

<label for="brgy">Barangay:</label>
<input type="text" list="barangay" autocomplete="off" id="brgy">

If you are still wondering what the hell is the use of the label attribute. Then go ahead and click the label in the browser and see for yourself where the cursor goes.

So now, we create the datalist field. Note that the list attribute of the input field should be the same with the id attribute of the datalist field.

<datalist id="barangay">
   //loop goes here
</datalist>

Inside the datalist field, we loop through the array which was stored in the $sel_brgy variable.

<?php if($res_num > 0){ ?>
	<?php foreach($sel_brgy as $sb){ ?>
		<option value="<?php echo $sb->barangay; ?>"><?php echo $sb->barangay; ?></option>
	<?php } ?>
<?php } ?> 

That’s pretty much all of the code required in providing auto-suggest functionality to a text field. It was made easier because of the new form features in html5.

Here’s an output, rendered in Firefox 5:

image

 

Conclusion

Really simple interface, that’s why I prefer to using this instead of those stylish jquery auto-suggest plugins. And speaking of jquery, we didn’t even use the ajax() function in jquery to have this nice little functionality. It’s just plain html and php. That’s it for this tutorial, see you again next time. Thanks for reading!

Advertisements

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

%d bloggers like this: