ساخت Autocomplete در jQuery با داده های XML

  • منتشر شده در تاریخ

ساخت Autocomplete در jQuery با داده های XML

قابلیت autocomplete (تکمیل خودکار) یک مکانیزم برای نمایش مقادیر پیشنهای در هنگام تایپ در یک فیلد ورودی به کاربر است. این ویژگی , به طور معمول برای بهبود UI/UX در اپلیکشن ها استفاده می شود.

 

بسیار راحت خواهد بود اگر که مثلا فیلد آدرس ها بصورت یک فیلد پیشنهاد خودکار (typeahead) به نمایش داده میشد. با تایپ کردن در این فیلد, لیست قابل انتخاب بصورت پیشنهادی به کاربر نمایش داده میشود.

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

 

آموزش ساخت Autocomplete در jQuery با داده های XML جدا از آموزش انتخاب شهر و استان بصورت آبشاری است. قبلا, ما نحوه ساخت autocomplere با داده های دیتابیس را توسط ajax دیدیم. که یک تابع اجکس جی کویری را برای ارسال درخواست به دیتابیس و دریافت اطلاعات براساس کلمه وارد شده توسط کاربر , نوشتیم.

در این مثال, از jQuery UI برای ساخت autocomplete با خواندن داده ها از فایل منبع XML را خواهیم داشت. فایل XML مورد نظر ما شامل لیست نام کشور خواهد بود که به عنوان سورس در ابتدای فراخوانی تابع autocomplere کتابخانه jquery ui مشخص می شود.

 

کد HTML تکمیل خودکار

این یک صفحه فرود است که فیلد ورودی ما مشخص شده است. id این فیلد در سلکتور جی کوئری هنگام فراخوانی تابع autocomplere تعریف می شود.

با شروع تایپ در این فیلد تابع autocomplete جی کوئری برای نمایش باکس پیشنهادات به کاربر اجرا می شود.

ساخت Autocomplete در jQuery با داده های XML

با انجام رویداد keypress بر روی فیلد تکمیل خودکار, تابع autocomplete جی کوئری برای خواندن اطلاعات XML و نمایش آن در باکس پیشنهاد با گزینه های مربوطه, فراخوانی می شود.

نام فایل xml در درخواست ajax برای خواندن لیست نام کشورها در یک آرایه, مشخص شده است.

این آرایه به عنوان پارامتر source تابع autocomplete مشخص می شود. از این داده ها, گزینه های پیشنهادی تکمیل خودکار به کاربر نمایش داده میشود.

فایل XML – لیست کشور ها

خروجی – ساخت Autocomplete در jQuery با داده های XML

اسکرین شات زیر به شما خروجی ساخت Autocomplete در jQuery با تابع autocomplete را با خواندن داده ها از XML بوسیله AJAX را نمایش می دهد.

ساخت Autocomplete در jQuery با داده های XML

امیدوارم از آموزش ساخت Autocomplete در jQuery با داده های XML نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی