خودتکمیلی (Auto-completion) یعنی برنامه یا محیط، بتونه کلمهای رو که کاربر قصد تایپ اون رو داره، حدس بزنه و در صورت تایید کاربر، تکمیل کنه. به عنوان مثال: یک محل استفاده از خودتکمیلی، در فرم جستجو سایت هست که کاربر با تایپ چند کلمه، میتونه اطلاعات مطالب شما رو در یک لیست مشاهده کنه. حالا این چه مزیتی داره؟ اول اینکه سهولت در جستجو برای کاربر و ثانیا جلوگیری از خطاهای بی مورد 404. کاربران عزیز با مراجعه به ادامه مطلب خواهند توانست این مبحث رو بخوبی فرا بگیرند.
جهت مشاهده آموزش ساخت autocomplete با کمک php و جی کوئری به ادامه مطلب مراجعه نمایید.
و اما نمونه ای که ما امروز آماده کردیم، قراره که یک فیلد ورودی داشته باشه و کاربر نام کشورش رو در این فیلد وارد کنه و سپس ما با استفاده از تابع autocomplete (از کتابخانه Jquery UI) لیستی از نتایج پایگاه دادمون رو به کاربر نشون میدیم. تصویر فرآیند نهایی، به صورت زیر خواهد بود:
مراحل ساخت و پیاده سازی عبارتند از:
مرحله اول: کتابخانه
برای استفاده از این قابلیت، اول از همه می بایست 2 کتابخانه JQuery و JQuery Ui رو به همراه شیوه نامه ی jquery-ui.min.css (که ظاهر لیست dropdown رو استایل دهی میکنه) در صفحه قالبمون فراخوانی کنیم.
HTML
[css]<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=”http://code.jquery.com/jquery-1.9.1.min.js”></script>
<script type=”text/javascript” src=”http://code.jquery.com/ui/1.10.1/jquery-ui.min.js”></script>[/css]
مرحله دوم: تعریف فیلد ورودی
تعریف یک فیلد ورودی که بایستی حتما یک مشخصه class یا id رو داشته باشه. این فیلد رو ما به صورت زیر تعریف کردیم که البته شما میتونید از اون در یک form هم استفاده کنید.
HTML
[css]<input type=’text’ name=’country’ value=” class=’autocom’>[/css]
مرحله سوم: فراخوانی تابع autocomplete و تعیین یک محل خوراک
در این بخش، ابتدا باید مشخه class یا id رو – که در فیلد ورودی تعیین کرده بودیم – در پیشوند فراخوانی تابع قرار بدیم. پس از انجام این کار و نوشتن تابع، نیاز به چند تنظیم ساده داریم که مربوط به تابع autocomplete میشه و مهمترینش تعیین یک محل خوراک در مشخصه source. این منبع، حتما باید از فرمت استاندارد JSON پیروی کنه و اطلاعات رو در اختیار تابع، قرار بده (برای ایجاد این منبع، محل سورس رو به فایلی با نام Search.php آدرس دهی میکنیم).
Jquery UI
[css]<script type=”text/javascript”>$(function() {
$(“.autocom”).autocomplete({
source: “search.php”
});
});
</script>[/css]
تا اینجای کار، کدنویسی سمت کاربر تموم شده. حالا اگه ما بیایم و مراحل بالا رو در قالب یک صفحه html جمع بندی کنیم. نتیجه اش اسکریپتی میشه که با تایپ هر رشته کلمه جدید توسط کاربر، همواره یک لینک درخواست خوارک، به محل source ارسال میکنه. این لینک حاوی نام term و مقدار تایپ شده توسط کاربر. به عنوان مثال، اگه کاربر در فیلد ورودی رشته ی ir رو تایپ کنه، لینک درخواست فرضی ما به صورت زیر خواهد بود:
http://localhost/autocomplete/search.php?term=ir
مرحله چهارم: چاپ نتایج پایگاه داده در فرمت JSON
چهارمین مرحله که آخرین مرحله کار هم محسوب میشه، اتصال به پایگاه داده و دریافت نتایج از یک جدول نمونه است. این کار رو ما در فایل search.php – که در بالا آدرس دهی کردیم – به صورت زیر انجام میدیم:
PHP
[css]<?phpdefine(‘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
}
?>[/css]
تمامی توضیحات در کنار کدها کامنت گذاری شدند و فک نکنم نیاز به توضیحات بیشتری داشته باشند! با اینحال تنها نکته ای که باقی مونده، دریافت اطلاعات از پایگاه داده است که ما به صورت فرضی، جدولی رو با نام countries ایجاد کردیم که دارای ستونی با نام country هست و تمامی اطلاعات از این ستون گرفته خواهد شد. شما میتونید نام این ستون و جدول فرضی رو مطابق با طراحی پایگاه دادتون تغییر بدید.
برگرفته از : دنیای وردپرس
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۵ شهریور ۱۳۹۳
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
تشکر از همکار عزیز
آموزش مفیدی بود ، دستتون درد نکنه
تشکر میکنم