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

نوامبر 21, 2011 توسط : سعید

در این آموزش شما با نحوه درست کردن Auto Complete  با استفاده از jQuery , php و mysql آشنا خواهید شد.
Auto Complete   چیست؟
Auto Complete  به روشی گفته میشه که هنگامی که شما داخل یه textbox شروع به تایپ میکنید کادر کوچکی زیر textbox نمایش داده میشه که یه سری کلمات رو به شما پیشنهاد میده و با انتخاب اون کلمات نیازی به تایپ تمام کلمه نیست.مثل روشی که هنگام جستجو در گوگل میبینید.



ساخت ديتابيس

قبل از اينکه شروع به ساخت کنيم ابتدا يه ديتابيس ميسازيم و تعدادي اطلاعات رو در جدولمون قرار ميديم.

[sql]
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’);
[/sql]

ايجاد صفحه index.php
صفحه index.php رو مانند شکل زير بسازيد :

[html]
<!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>
[/html]

دقت کنيد که اين فايل بايد در کنار فايلهايي قرار بگيره که توي قسمت قبلي دانلود کردين
صفحه autocomplete.php
يه صفحه ديگه بسازيد و اسمش رو autocomplete.php بزاريد.

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

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

علیرضا
دسامبر 7, 2011 @ 1:29 ب.ظ

با سلام
لینک دانلودی که گذاشتید مربوط به نسخه 1.3.2 از جی کوئری هستش ، الان نسخه جی کوئری 1.7 است ، لطفا لینک را بروز کنید.
در کل این مطلب و 9 تابع سودمند بسیار عالی بودند ، در مورد فریم وررکتون هم باید بگم که انتشار منابع فارسی به صورت پی دی اف بسیار مهم تر از خود فریم ورک است، چون این کار باعث شناسایی فریم ورک شما می شود.
فریم ورک هم زود به زود آپدیت کنید و منابع فارسی و مثال هاش رو قرار بدید تا توسعه دهندگان رو جذب کنید.
دیگر این که اگه لطف کنید بیشتر در مورد رابطه جی کوئری با php (مانند پست بالا) مثال بیزنید.
و انواع کد ها و شکل ها مختلف از جمله فرم ها ، بازی های کوچک مانند نقطه و.. ، چک کردن اطلاعات (مثلا تکراری نبودن فیلدی در هنگام پر کردن فرم به صورت آژاکسی) و…
قالب سایتتون هم از قبلی خیلی بهتره! اما فونت ها خیلی بده ، مخصوصا الان که دارم نظرم رو می نویسم واقعا فونت مزخرفی داره ، همه ی فونت ها رو تاهما کنید.
موفق باشید.

پاسخ
    سعید
    دسامبر 7, 2011 @ 3:10 ب.ظ

    تغییراتی که گفتید رو در مورد سایت اعمال میکنم.
    در مورد فریم ورک هم باید وقت کنم و هم به روزرسانیش کنم و هم داکیومنتش رو آماده کنم.متاسفانه چون تنها هستم یه مقدار طول میکشه آپدیتش.شما و بقیه دوستان اگر مایل هستین خوشحال میشم روی گسترش فریم ورک آرتمیس باهم همکاری کنیم.

    ممنون بابت نظر مفیدتون
    موفق باشید

    پاسخ
فوریه 7, 2012 @ 3:42 ب.ظ

یادتون نره اگر خواستید خیلی پیشرفته عمل کنید و از عبارات منظم هم استفاده کنید حتماً استفاده از preg_quote() رو فراموش نکنید

پاسخ
alireza
آگوست 4, 2012 @ 11:59 ق.ظ

با سلام
من از jquery ui autocomplete استفاده میکنم و در جستجوی داده های انگلیسی مشکلی ندارم. اما در فارسی با تایپ کردن حروف اتفاق خاصی نمی افتد اما بمحض زدن کلید backspace یا یکی از Arrow Keyها نتایج جستجو بصورت کمبو باکس لیست می شود.
چطور میتوانم نتایج جستجوی فارسی را بدون زدن کلید اضافی همانند انگلیسی ببینم؟

پاسخ
اکتبر 27, 2013 @ 10:46 ق.ظ

ممنون عالی بود

پاسخ
فوریه 12, 2014 @ 4:05 ب.ظ

با سلام
سایتتون رو تا دیدم در صفحه اول گوگل قرار گرفته بدون معطلی کلیک کردم
خیلی عالیه اگر فعالیت تون رو ادامه بدین

از اونجایی که من خودم شخصا علاقه دارم به پی اچ پی و دوست دارم سریعتر یاد بگیرم کلیات رو بعد برسم به جزئیات اومد آخرین پست و براتون با اجازه کامنت گذاشتم

با اجازتون کامنت رو با اسم سایتم گذاشتم – براتون ارزوی موفقیت دارم

مددی – اراک

http://www.mellatpayamak.com

پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*