datalist

Today lets build a dynamic suggested list input field using HTML5, jQuery, PHP and MySQL.

Dynamic-suggested-list-html5-jquery-php-mysql

We have 55 company names in our database table – and the import file(.sql) can be downloaded at the end of this tutorial page. By using jQuery we pass user input to suggest.php file and the result is embedded into index.html file.

HTML file
index.html

<!DOCTYPE HTML>
<html>
<head>
<title>Dynamic Auto-Suggestion using datalist element: HTML5</title>
<meta charset="utf-8"/>
<script src="jQuery.js"></script>
<script src="myScript.js"></script>
</head>
<body>
 
<form>
<input type="text" list="myCompanies" name="company" id="suggest" />
<datalist id="myCompanies">
 
</datalist>
</form>
 
</body>
</html>

Here we have included jQuery library file before our script myScript.js
We also have an input field of type text, with an id = suggest, name = company and list = myCompanies. And a datalist element is linked/associated with input field, by matching it’s id with the name of input field’s list attribute. The value for option tag will be filled by jQuery, using the results output by suggest.php file.

PHP file
suggest.php

< ?php

    $db         = mysqli_connect('localhost', 'root', '', 'search');
    
    $company    = $_GET['company'];
    
    $sql        = "SELECT name FROM table1 WHERE name like '$company%' ORDER BY name";
    
    $res        = $db->query($sql);
    
    if(!$res)
        echo mysqli_error($db);
    else
        while( $row = $res->fetch_object() )
            echo "<option value="".$row->name."">";
        
?>

Here we connect php file to database(search). Get the keyword entered by the user in the input field and form a sql query. By using query() method, we process it and finally format it the way we need it i.e., we wrap the company names inside option tag’s value attribute.

jQuery file
myScript.js

$(document).ready(function(){
    $("#suggest").keyup(function(){
        $.get("suggest.php", {company: $(this).val()}, function(data){
            $("datalist").empty();
            $("datalist").html(data);
        });
    });
});

For every keyup event on the input field we trigger jQuery method $.get() and pass the user input keys to suggest.php file and the result is collected back by the callback function and the result set is stored in a variable called data.

Now we first make sure to clear out previous data present inside datalist element i.e., we clear the previous results by removing any option tags present inside datalist element. Now we fill the datalist element with the new data/result output from suggest.php file.

Since we’re using jQuery here, page does not reload and the suggested entries looks real and spontaneous.

Here is the list of company names I’ve taken for this tutorial

3M
7-Eleven
Accenture
Acer
Adidas
Adobe systems
Amazon.com
AMD
AOL
Apache
Apple inc
Appolo group
Aricent
Ask.com
Asus
AT&T
Bank of America
BBC
BE Aerospace
BMC Software
Boeing
Bosch Brewing Company
Boston Acoustic
CA Technologies
Citrix Systems
Cognizant Technolog
Cognizant Technology Solutions
Convergys
Dell
Delphi
DHL
Divx Inc
eBay
EMC Corporation
Exelon
Facebook
Ford Motor Company
Fox Entertainment Group
GCI
GoDaddy
Goodrich Corporation
Google
Hawaiian Airlines
Hewlett-Packard
Honeywell
IBM
Intel
Johnson & Johnson
KFC
McDonalds
Microsoft
Motorola
Nvidia
Red Hat
Yahoo!

Video Tutorials: Dynamic Suggested List: HTML5 + jQuery + PHP + MySQL

[youtube https://www.youtube.com/watch?v=YqMtE8UO-xw]

YouTube Link: https://www.youtube.com/watch?v=YqMtE8UO-xw [Watch the Video In Full Screen.]

Note: For any older browsers which do not support datalist element or list attribute, it will simply fall back to text type input field and it doesn’t produce any error.

Lets build a simple auto suggesting form field with the help of datalist form element of HTML5.

suggest-list-entries-datalist-form-element-html5

Here I’ve taken a text input field, and with the help of datalist element and list attribute, have built a auto suggesting form field.

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>Auto Suggestion using datalist Element: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<input type="text" list="myCompanies"/>
<datalist id="myCompanies">
<option value="Google">
</option><option value="Apple">
</option><option value="Oracle">
</option><option value="Yahoo">
</option><option value="IBM">
</option><option value="Microsoft">
</option><option value="Technotip">
</option><option value="American Express">
</option></datalist>
 
</form>
 
</body>
</html>

Here I’ve added a list attribute to the input field and named it as myCompanies. Also have taken datalist form element with an id which matches the list attribute of the input field.

Auto Suggested Entries Using list attribute: HTML5

[youtube https://www.youtube.com/watch?v=3ExFs-lTbKY]

YouTube Link: https://www.youtube.com/watch?v=3ExFs-lTbKY [Watch the Video In Full Screen.]

Note: You can get the user entry by using key press event, and fetch the corresponding data from the database using PHP, jQuery and mySQL and auto suggest some form entries.
Make sure to fetch 5 to 10 entries only, as it may take more time and may overload the server if you don’t limit the no of entries you fetch from the database. And more over it looks confusing and cluttered, if you suggest too many things at once!