In this tutorial I want to show you how easy to do a auto complete text box with PHP, jQuery and MySql.
Firstly download the autocomplete jQuery plugin and extract it to your hard drive.
And then create a folder in your localhost. Copy jquery.autocomplete.css and jquery.autocomplete.js file to your project folder. And you will also need jquery.js. Now we can start our project.
We need to create a table in our database before writing our script. I also add some data for this table. Import following SQL statement via phpMyAdmin or any other MySQL tool.
We have done. Run your project and type in your text box you will see following screenshot.
By the way, I use the old jquery plug in this project. If you want to learn new thing, you can learn hereand here. I create this tutorial because it is still useful and easy, although it is too old. I will also write about new jquery ui later.
Download Source Code
Thanks To : Wai Lynn Oo
Firstly download the autocomplete jQuery plugin and extract it to your hard drive.
And then create a folder in your localhost. Copy jquery.autocomplete.css and jquery.autocomplete.js file to your project folder. And you will also need jquery.js. Now we can start our project.
Creating database table
We need to create a table in our database before writing our script. I also add some data for this table. Import following SQL statement via phpMyAdmin or any other MySQL tool.
CREATE TABLE `tag` ( `id` int(20) NOT NULL auto_increment, `name` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ; INSERT INTO `tag` (`id`, `name`) VALUES (1, 'php'), (2, 'php frameword'), (3, 'php tutorial'), (4, 'jquery'), (5, 'ajax'), (6, 'mysql'), (7, 'wordpress'), (8, 'wordpress theme'), (9, 'xml');
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Auto Complete Input box</title> <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.autocomplete.js"></script> <script> $(document).ready(function(){ $("#tag").autocomplete("autocomplete.php", { selectFirst: true }); }); </script> </head> <body> <label>Tag:</label> <input name="tag" type="text" id="tag" size="20"/> </body> </html>
autocomplete.php
This file is called from our jquery script. This php script is easy to follow.<?php $q=$_GET['q']; $my_data=mysql_real_escape_string($q); $mysqli=mysqli_connect('localhost','username','password','databasename') or die("Database Error"); $sql="SELECT name FROM tag WHERE name LIKE '%$my_data%' ORDER BY name"; $result = mysqli_query($mysqli,$sql) or die(mysqli_error()); if($result) { while($row=mysqli_fetch_array($result)) { echo $row['name']."\n"; } } ?>
By the way, I use the old jquery plug in this project. If you want to learn new thing, you can learn hereand here. I create this tutorial because it is still useful and easy, although it is too old. I will also write about new jquery ui later.
Download Source Code
Thanks To : Wai Lynn Oo
