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.
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.<?phpBy the way, I use the old jquery plug in this project. If you want to learn new thing, you can learn here and 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.
$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";
}
}
?>
Demo
After reading this blog I very strong in these topics and this blog really helpful to all...
ReplyDeleteAngularJS 5 Online Course India