Auto Complete Text Box With PHP,Javascript,JQuery and MySql phptaab
Auto Complete Text Box With PHP,Javascript,JQuery and MySql phptaab
Creating info table
We need to form a table in our info before writing our script. I conjointly add some information for this table. Import following SQL statement via phpMyAdmin or the other MySQL tool.
autocomplete.php
This file is termed from our jquery script. This php script is simple to follow.
index.php
jquery.js
jquery.autocomplete.js
DOWNLOAD
jquery.autocomplete.css
DOWNLOAD
We have done. Run your project and kind in your text box you'll see following screenshot.
By the way, i exploit the recent jquery insert this project. If you would like to find out new issue, you'll be able to learn here and here. I produce this tutorial as a result of it's still helpful and simple, though it's too recent. If You like this Don't Forget pin a COMMENT
Creating info table
We need to form a table in our info before writing our script. I conjointly add some information for this table. Import following SQL statement via phpMyAdmin or the 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');
autocomplete.php
This file is termed from our jquery script. This php script is simple to follow.
<?php
$q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
$mysqli=mysqli_connect('localhost','root','','autofield') 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";
}
}
?>
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[phptaab.blogspot.in]</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 Name:</label>
<input name="tag" type="text" id="tag" size="20"/>
</body>
</html>
jquery.js
DOWNLOAD
jquery.autocomplete.css
DOWNLOAD
We have done. Run your project and kind in your text box you'll see following screenshot.
By the way, i exploit the recent jquery insert this project. If you would like to find out new issue, you'll be able to learn here and here. I produce this tutorial as a result of it's still helpful and simple, though it's too recent. If You like this Don't Forget pin a COMMENT
Category:
0 comments