xHtml - Part 4

Dynamic Suggested List: HTML5 + jQuery + PHP + MySQL

Today lets build a dynamic suggested list input field using HTML5, jQuery, PHP and 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.

Suggested Entries Using datalist Element: HTML5

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!

autocomplete Attribute of Form Field: HTML5

Today lets see how autocomplete attribute of HTML5 works.

Here we take 3 input fields and individually enable and disable the autocomplete feature by specifying it’s values: ON and OFF.

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>Form, autocomplete: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
First Name: <input type="text" name="fname" autocomplete="on"/> <br /><br />
Second Name: <input type="text" name="lname" autocomplete="on"/><br />
Email: <input type="text" name="email" autocomplete="off"/><br />
<input type="submit"/>
</form>
 
</body>
</html>

Here we have 3 input fields with autocomplete turned ON for first 2 and turned off for the last.

autocomplete Attribute of Form Field: HTML5

[youtube https://www.youtube.com/watch?v=XNjUfwDmHGc]

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

Note:
To make autocomplete feature to work
1. Turn ON the autocomplete feature for form, in your browser.
2. Make sure to name all your input fields. Without naming, autocomplete feature may not work.
3. If not specified, tags will inherit autocomplete feature from its parent tag. If not turned OFF, browser will have autocomplete turned ON by default, once it is enabled in browser settings.

autocomplete=”off”
Turn off autocomplete to password fields, debit card, credit card, account number fields.

autofocus Attribute of Form Field: HTML5

Quick video to illustrate autofocus attribute of HTML5 form fields.

Here we take 3 input fields, and one field is set with autofocus attribute.

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>Form, Autofocus: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<input type="text" />
<input type="text" />
<input type="text" autofocus/>
<button>Done</button>
</form>
 
 
</body>
</html>

In above case, the third input field gets the autofocus.

autofocus Attribute of Form Field: HTML5

[youtube https://www.youtube.com/watch?v=E1L5-5ZhZaE]

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

Note: You can also apply autofocus to the buttons, so that user can directly hit OK or CANCEL by pressing Enter key of their keyboard! – whichever is most desired.

HTML5 and CSS3 Video Tutorial List

Here we list all the HTML5 and CSS3 video tutorials ..all these video tutorials are 3 or 5 or 10 minutes in length and you can go through them very quickly. Learning along with me while I teach is the best way to learn. You can ask your questions/doubts in the comment section of respective tutorial page/post.

If you’re thinking of HTML7, then my advice would be to first learn HTML5 – this would surly be a basement for upcoming improvements. By learning HTML5, you’ll be ahead of your competition.

Please bookmark this page, share on social sites, let your friends know about our video tutorials – this way you’ll be helping us in our good cause of helping people!

This page will be updated with up coming HTML5 and CSS3 lessons ..stay subscribed