ساخت 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
(۱, 'php'),
(۲, 'php frameword'),
(۳, 'php tutorial'),
(۴, 'jquery'),
(۵, 'ajax'),
(۶, 'mysql'),
(۷, 'wordpress'),
(۸, 'wordpress theme'),
(۹, '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";
}
}

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

بازدید : ۵۷۰۰

علیرضا
آذر ۱۶, ۱۳۹۰ @ ۱:۲۹ ب.ظ

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

پاسخ دادن
    سعید
    آذر ۱۶, ۱۳۹۰ @ ۳:۱۰ ب.ظ

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

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

    پاسخ دادن
بهمن ۱۸, ۱۳۹۰ @ ۳:۴۲ ب.ظ

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

پاسخ دادن
alireza
مرداد ۱۴, ۱۳۹۱ @ ۱۱:۵۹ ق.ظ

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

پاسخ دادن
آبان ۵, ۱۳۹۲ @ ۱۰:۴۶ ق.ظ

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

پاسخ دادن
بهمن ۲۳, ۱۳۹۲ @ ۴:۰۵ ب.ظ

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

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

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

مددی – اراک

http://www.mellatpayamak.com

پاسخ دادن

پاسخ دهید

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


*