ساخت Auto Complete با استفاده از PHP و jQuery

در این آموزش شما با نحوه درست کردن 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');

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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Auto Complete Input box</title>

$(document).ready(function(){

$("#tag").autocomplete("autocomplete.php", {

selectFirst: true

});

</script>

</head>

<body>

</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";
}
}

$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";

}

خب کارمون تموم شد!! پروژه رو اجرا کنيد و داخل textbox يه چيزي تايپ کنيد .

Meghdad Alibakhshi

مقداد علی بخشی هستم. موسیقی دان، برنامه نویس، متخصص هوش مصنوعی، علم داده، متخصص بلاکچین و توسعه دهنده ربات های هوشمند.
دانش آموخته مقطع ارشد و دکتری دانشکده فنی دانشگاه تهران هستم. با سابقه تدریس درس برنامه نویسی در دانشگاه (پردیس بین الملل کیش دانشگاه تهران)

ساخت Auto Complete با استفاده از PHP و jQuery

ساخت ديتابيس

تبلیغات :

دیدگاه‌ خود را بنویسید لغو پاسخ

ساخت ديتابيس

مطالب مرتبط:

تبلیغات :

دیدگاه‌ خود را بنویسید لغو پاسخ