لیستهای تکمیل شونده در یک وب سایت کمک میکند کاربر کمتر تایپ کند و زودتر به نتیجه ی دلخواه خود برسد. یکی از بهترین مثالهای این روش لیست جستجو در سایت گوگل است. به محض اینکه شروع به تایپ میکنید گوگل لیستی از نتایج ممکن را برای شما فراهم میکند و گاهی هم پیشنهادهای شرم آوری میدهد! حالا ما قصد داریم یک نمونه از آن را پیاده کنیم.

روش اول :

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



و در همان View کدهای زیر را اضافه کنید :


        $(function () {
var provinces = [
"آذربایجان شرقی",
"آذربایجان غربی",
"اردبیل",
"تهران"];
$("#autosearch").autocomplete({
source: provinces
});
});



روش AJAX :

در مثال قبلی هیچ چیز مهیجی وجود ندارد. بخصوص اینکه لیست قابل تغییر نیست و اگر قرار باشد بین کاربران یک سایت یا موضوعات مطالب وارد شده توسط کاربران جستجو کنید هیچ فایده ای ندارد. در صورتی که بخواهید از اطلاعات دینامیکی برای جستجو در لیست تکمیل شونده استفاده کنید باید یک ActionResult در سمت سرور داشته باشید.

public ActionResult Search(string term)
{
var results = provinces
.Where(p => p.StartsWith(term))
.Select(p => new { label = p });
return Json(results, JsonRequestBehavior.AllowGet);

}

متد ورودی باید با نام term فراخوانی شود و حتما از نوع string باشد. این کلمه عین عبارتی است که کاربر در input صفحه ی HTML وارد کرده است. شما آن را وارد حلقه ی جستجو یا LINQ میکنید و نتایج را بدست می آورید. مقدار خروجی این متد باید از نوع json باشد همچنین مقادیر باید درون خصوصیتی با نام label قرار بگیرند. اینها الزاماتی است که باید رعایت کنید تا خروجی در سمت کلاینت نمایش داده شود.

در سمت کاربر تنظیم در اسکریپت به صورت زیر به سرور میرسد :


$(function () {
$('#autosearch').autocomplete(
{
source: "/Home/Search"
});
});

مقدار عبارت درون source برابر با آدرس متد Search(string term) است که عملیات جستجو را انجام میدهد.
 
شیوه های بهتر پیاده سازی :
استفاده از این روش برای یک لیست خوب است اما اگر قرار باشد در جای جای وب سایت جدول تکمیل شونده داشته باشید و بخواهید تک تک مقدار سورس را به صورت دستی تغییر و تنظیم کنید چالش جدی در پیش دارید.
راه بهتر استفاده از صفت هایی(Attribute) با پیشوند data- است. شما میتوانید به هر تگ HTML5 یک صفت جدید اضافه کنید به شرط اینکه ابتدای آن با عبارت data- شروع شده باشد. (در مرورگرهای قدیمی هم کار میکند). سپس میتوانید مقادیر دلخواه خود را درون این صفتها ذخیره کنید و بعدا با دستور attr در jQuery آنها را بازیابی کنید.


میبینید که صفت data-autocomplete را خودمان ساخته ایم و مقدارش را با استفاده از Url.Action تنظیم می کنیم که بهترین شیوه برای آدرس دهی به یک اکشن در ASP.MVC است. سپس کد جاوا اسکریپت را به صورت زیر اصلاح می کنیم :



$(function() {
var $autocomplete = $('[data-autocomplete]');
$autocomplete.each(function() {
$(this).autocomplete({
source: $(this).attr('data-autocomplete')
});
});
})

ابتدا متغیری برای انتخابگر jQuery تنظیم می کنیم. این انتخابگر به دنبال تگهایی میگردد که دارای صفت data-autocomplete باشند. در ادامه با دستور each همه ی تگهای یافته شده را مرور می کنیم و قابلیت autocomplete را در آنها تنظیم می کنیم. برای تنظیم مقدار source هم از دستور attr که مقدار یک صفت را بر میگرداند بهره می بریم. حالا میتوانید به تعداد دلخواه در این صفحه از Autocomplete استفاده کنید. فقط کافی است هرجا لازم به جستجو داشتید مقدار data-autocomplete را روی آدرس ActionResult جستجو کننده تنظیم کنید. فراموش نکنید نوشتن این متد جستجو سمت سرو به عهده ی شماست.
 

در آخر دقت کنید که مقادیر استانها به صورت یک لیست درون سورس درج شده اند. شما همیشه میتوانید بجای آن از بانک SQL یا روش های دیگر استفاده کنید .

private List provinces;
public HomeController()
{
provinces = new List()
{"آذربایجان شرقی",
"آذربایجان غربی",
...اسامی استانهای ایران
"اردبیل",
"یزد"};
}

دانلود متن کامل مقاله آموزش استفاده از autocomplet در ASP با کمک jQuery

به همراه سورس پروژه در VS2012