خودتکمیلی (Auto-completion) یعنی برنامه یا محیط، بتونه کلمهای رو که کاربر قصد تایپ اون رو داره، حدس بزنه و در صورت تایید کاربر، تکمیل کنه. به عنوان مثال: یک محل استفاده از خودتکمیلی، در فرم جستجو سایت هست که کاربر با تایپ چند کلمه، میتونه اطلاعات مطالب شما رو در یک لیست مشاهده کنه. حالا این چه مزیتی داره؟!؟ اولا سهولت در جستجو برای کاربر و ثانیا جلوگیری از خطاهای بی مورد ۴۰۴.
و اما نمونه ای که ما امروز آماده کردیم، قراره که یک فیلد ورودی داشته باشه و کاربر نام کشورش رو در این فیلد وارد کنه و سپس ما با استفاده از تابع autocomplete (از کتابخانه Jquery UI) لیستی از نتایج پایگاه دادمون رو به کاربر نشون میدیم. تصویر فرآیند نهایی، به صورت زیر خواهد بود:
مراحل ساخت و پیاده سازی عبارتند از:
مرحله اول: کتابخانه
برای استفاده از این قابلیت، اول از همه می بایست ۲ کتابخانه JQuery و JQuery Ui رو به همراه شیوه نامه ی jquery-ui.min.css (که ظاهر لیست dropdown رو استایل دهی میکنه) در صفحه قالبمون فراخوانی کنیم.
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
مرحله دوم: تعریف فیلد ورودی
تعریف یک فیلد ورودی که بایستی حتما یک مشخصه class یا id رو داشته باشه. این فیلد رو ما به صورت زیر تعریف کردیم که البته شما میتونید از اون در یک form هم استفاده کنید.
HTML
<input type='text' name='country' value='' class='autocom'>
مرحله سوم: فراخوانی تابع autocomplete و تعیین یک محل خوراک
در این بخش، ابتدا باید مشخه class یا id رو – که در فیلد ورودی تعیین کرده بودیم – در پیشوند فراخوانی تابع قرار بدیم. پس از انجام این کار و نوشتن تابع، نیاز به چند تنظیم ساده داریم که مربوط به تابع autocomplete میشه و مهمترینش تعیین یک محل خوراک در مشخصه source. این منبع، حتما باید از فرمت استاندارد JSON پیروی کنه و اطلاعات رو در اختیار تابع، قرار بده (برای ایجاد این منبع، محل سورس رو به فایلی با نام Search.php آدرس دهی میکنیم).
Jquery UI
<script type="text/javascript"> $(function() { $(".autocom").autocomplete({ source: "search.php" }); }); </script>
تا اینجای کار، کدنویسی سمت کاربر تموم شده. حالا اگه ما بیایم و مراحل بالا رو در قالب یک صفحه html جمع بندی کنیم. نتیجه اش اسکریپتی میشه که با تایپ هر رشته کلمه جدید توسط کاربر، همواره یک لینک درخواست خوارک، به محل source ارسال میکنه. این لینک حاوی نام term و مقدار تایپ شده توسط کاربر. به عنوان مثال، اگه کاربر در فیلد ورودی رشته ی ir رو تایپ کنه، لینک درخواست فرضی ما به صورت زیر خواهد بود:
http://localhost/autocomplete/search.php?term=ir
مرحله چهارم: چاپ نتایج پایگاه داده در فرمت JSON
چهارمین مرحله که آخرین مرحله کار هم محسوب میشه، اتصال به پایگاه داده و دریافت نتایج از یک جدول نمونه است. این کار رو ما در فایل search.php – که در بالا آدرس دهی کردیم – به صورت زیر انجام میدیم:
PHP
<?php define('DB_SERVER', 'localhost');//نام سرور define('DB_USER', 'root');//نام کاربری دیتابیس define('DB_PASSWORD', '');//رمز عبور دیتابیس define('DB_NAME', ''); //نام دیتابیس if (isset($_GET['term'])){ //شرط دریافت متد GET از URL. اگر url در خواستی به این فایل، دارای متد Get و نام term نباشد، هیچ اتفاقی نخواهد افتاد. $return_arr = array(); try { //تلاش برای انجام فرآیندها... $conn = new PDO("mysql:host=".DB_SERVER.";dbname=".DB_NAME, DB_USER, DB_PASSWORD); //ایجاد اتصال به پایگاه داده $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //تعیین ویژگی های برخورد با خطا $conn->exec("set names utf8");//این خط برای پشتیبانی از رشته های utf8 که فارسی هم در این دسته قرار داره نوشته شده. $stmt = $conn->prepare('SELECT country FROM countries WHERE country LIKE :term'); //فراهم آوردی اطلاعات مورد نظر از ستون country و جدول countries. برای ایجاد مشابهت، حتما باید از دستور like در Sql استفاده کنیم. $stmt->execute(array('term' => '%'.$_GET['term'].'%')); //این خط، فراهم آوری اطلاعات بالا رو اجرا میکنه و به متغیر :term که در قطعه کد بالا نوشته شده بود، محتوای متد GET رو مقدار دهی میکنه. while($row = $stmt->fetch()) { //ایجاد یک حلقه و ذخیره کردن اطلاعات هر سطر در متغیر row. $return_arr[] = $row['country']; //نتایج ستون country در آرایه return_arr ذخیره می شود. } } catch(PDOException $e) { // در صورت ایجاد خطا در مرحله try، این بخش اجرا شده و متن خطا چاپ میشود. echo 'ERROR: ' . $e->getMessage(); } echo json_encode($return_arr); //چاپ نتایج آرایه return_arr به فرمت استاندارد JSON } ?>
تمامی توضیحات در کنار کدها کامنت گذاری شدند و فک نکنم نیاز به توضیحات بیشتری داشته باشند! با اینحال تنها نکته ای که باقی مونده، دریافت اطلاعات از پایگاه داده است که ما به صورت فرضی، جدولی رو با نام countries ایجاد کردیم که دارای ستونی با نام country هست و تمامی اطلاعات از این ستون گرفته خواهد شد. شما میتونید نام این ستون و جدول فرضی رو مطابق با طراحی پایگاه دادتون تغییر بدید.
منبع: دنیای وردپرس و برنامه نویسی – www.alimir.ir
سلام
خیلی ممنون از مطلب مفیدتون
برای من به دیتا بیس متصل نمی شه ایا باید در دیتا بیس جدول های مربوطه رو ایجاد کنیم بعد برنامه خودش اسامی کشورها رو در دیتا بیس می نویسه یا نه خود برنامه از فایل php مربوطه اسم کشورها رو در میاره لطفا راهنماییم کنید خیای مه این اموزشش نیاز دارم
توسط باقر ناصري
سلام
شما را به خدا، با زبان شیوای فارسی اینگونه برخورد نکنید! سپاس از مطالب فنی شما، ولی این چه جور نگارش متن است؟
توسط مهندس برق
سلام وقتون بخیر اگر بخواهیم روی یکی از این کشور ها کلیک نماییم و به صفحه توضیحات در مورد آن کشور هدایت شویم کد آن به چه صورتی می باشد
توسط میلاد
با سلام برای اینکار بهتر نیست از قابلیت OnKeyUpجی کوری و Ajax استفاده کنیم؟
ضمنا یه مشکل دیگه اینکه اینکه شاید طرف خواست چند تا شهر یا محله انتخاب کنه !
مثل همین سایت های املاک !
انوقت باید چی کار کنیم ؟
توسط دانیال
سلام دانیال. این نوشته واسه ۴ سال پیشه. مطمئنا الان روش های بهتری وجود داره.
توسط علی میرزائی
سلام
خیلی ممنون
مطلب خوبی بود
توسط صادق علیخانی
سلام من میخوام چند تا کلمه رو سرچ کنم مثلا تهران فاطمی موبایل
لطفا کمک کن کدش رو بگو چطور بنویسم گیرشم!
توسط لیلی
سلام – مشکل منو برای نمایش نتایج حل کرد ولی 2 تا سوال و مشکل دارم که کامل بشه این اسکریپت!!!
1. چطور میشه به لیست نتایج که داده ها نمایش داده می شوند URL اختصاص داد و با کلیک روی هر نتیجه در لیست نتایج جستجو به URL آن مطلب وارد شد؟
2. در دیتابیس من بسیاری از عنوان مطالب بصورت علامت های مختلف ذخیره شده اند در صورتی که همگی فارسی و صحیح تایپ شده اند و حتی در سایت هم درست نمایش داده می شوند اما همچنان در لیت نتایج بصورت علامت های مختلف نمایش داده می شوند.
توسط پرسشگر
عالی بود داداش، دمت گردم
توسط وب ایکسو
واقن مرسی
ممنون از شما و سایت بسیار خوبتون
خیلی خوب بود
بسیییییار عالی
توسط chiro
سلام جدا مجذوب طراحی عالیتون شدم
موفق باشید
توسط سعید
سلام نظرتون راجع به وبسایت درمو داغون من چیه؟؟
درصورت امکان برام میل کنید یا اینکه دیدگاه بزارید
توسط سعید
سلام خسته نباشید عالی بود من تغییرات رو کد انجام دادم حالا از دیتابیس خودم و جداول اون میتونم جستجو کنم ولی بعد اینکه جستجو انجام شد و حرف یا کلمه مورد نظرو آورد چجوری میشه روش کلیک و اطلاعات اون فیلد رو تو یه صفحه نمایش داد اگه راهنمایی کنید ممنون میشم واقعا به این راهنمایی و کمکتون نیاز شدید دارم
توسط حسن
سلام. اگه آدرس (URL) یا ID (قابل استفاده در وردپرس برای بدست آوردن URL) اون صفحه رو در ستونی از جداول پایگاه داده ذخیره کرده باشید، میتونید در دستور SQL، اون ستون رو هم انتخاب کنید. منتها در خصوص پشتیبانی کتابخانه JQuery Ui در ارجاع به لینک، اطلاعات دقیقی ندارم. بهترین راه اینه که مستندات این کتابخانه رو مطالعه کنید:
http://tiny.alimir.ir/Lw8
توسط علی میرزائی
با سلام و تشکر از آموزشتون
اگر بخوایم نتایح جستجو دسته بندی بشه در قابل چند تا category کدش چطوری می شه؟
توسط سهیل
نمونه این موردی که شما مطرح کردید رو من تا حالا ندیدم! منتها در خصوص واکشی اطلاعات، شما هیچ محدودیتی ندارید و با استفاده از دستورات SQL و شروط مختلف میتونید سیستم رو مطابق با نیازهاتون توسعه بدید.
توسط علی میرزائی
علی آقا دمت گرم.
خدا خیرت بده ، مشکل ما رو حل کردی
توسط سهیل
بسیار عالی.
توسط تور ارزان استانبول
سلام من یه سوال دارم فقط سامانه ی پرسش و پاسخ رو پیدا نکردم یا جایی که دیده نمیشه یا من کم کشتم
توسط امید
سلام، آدرس سامانه پرسش و پاسخ:
http://answer.alimir.ir
توسط علی میرزائی
با سلام و خسته نباشید خدمت تمامی دوستان من یه سوال داشتم من یه دکمه داشتم برای قسمت ورود سایتم به این شکل
من خواستم یه لایو آیکون بهش اضافه کنم برای همین کد رو به این شکل تغغیر دادم.
خب لایو آیکون به دکمم اضافه شد و درست کار کرد
حالا یه دکمه دیگه دارم که مال ثبت نام هست به این شکل
هر کاری کردم نتونستم لایو آیکون رو بهش اضافه کنم یا درست کار نمیکرد یا اگه لایو آیکون بهش اضافه میشد دیگه دکمه کارش رو انجام نمیداد
ممنون میشم یکی کمکم کنه…
توسط میلاد
توضیحات واضح و عالی بود مرسی از سایت خوبتون
توسط دانلود
ممنونم “دانلود” عزیز 🙂
توسط علی میرزائی
سلام
وب سایت بسیار زیبایی دارید
توسط محمد
مرسی محمد جان، نظر لطفته…
توسط علی میرزائی