در اين آموزش شما با نحوه درست کردن Auto Complete با استفاده از jQuery , php و mysql آشنا خواهيد شد.
Auto Complete چيست؟
Auto Complete به روشي گفته ميشه که هنگامي که شما داخل يه textbox شروع به تايپ ميکنيد کادر کوچکي زير textbox نمايش داده ميشه که يه سري کلمات رو به شما پيشنهاد ميده و با انتخاب طراحی وب سایت اون کلمات نيازي به تايپ تمام کلمه نيست.مثل روشي که هنگام جستجو در گوگل ميبينيد.
ساخت ديتابيس
قبل از اينکه شروع به ساخت کنيم ابتدا يه ديتابيس ميسازيم و تعدادي اطلاعات رو در جدولمون قرار ميديم.
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
صفحه 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
يه صفحه ديگه بسازيد و اسمش رو autocomplete.php بزاريد.
$q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
$mysql=mysql_connect('localhost','username','password') or die("Database Error");
mysql_select_db('database');
$sql="SELECT name FROM tag WHERE name LIKE '%$my_data%' ORDER BY name";
$result = mysql_query($sql) or die(mysql_error());
if($result)
{
while($row=mysql_fetch_array($result))
{
echo $row['name']."n";
}
}
کد زير رو در فايل .htaccess قرار بديد :
# use utf-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8
# This applies to all the content serverd by the web server.
اگر بخوايد براي چند نوع فايل طراحی وب سایت مشخص کنيد که از کدوم مجموعه کاراکتر استفاده کنه از کد زير استفاده کنيد :
# force utf-8 for a number of file formats
AddCharset utf-8 .html .css .js .xml .json .rss
ساخت Auto Complete با استفاده از PHP و JQuery