awesomplete : اضافه کردن خاصیت autocomplete به input با استایلی زیبا

- visibility ۴ mode_comment

در این مطلب میخوام یک ابزار بنام awesomplete رو خدمتتون معرفی کنم که با استفاده از اون میتونین خاصیت autocomplete رو به input ها اضافه کنید و رابط کاربری سایتتون رو ارتقاء بدین. این ابزار در مرورگر IE9 به بالا هم پشتیبانی میشه و میتونین از اون استفاده کنید.

awesomplete

 

awesomplete1

همونطور که در فایل دمو دیدید ، با تایپ کردن دو حرف در input ، بصورت اتوماتیک لیستی باز میشه که میتونین با استفاده از کلیدهای بالا و پایین keyboard گزینه مورد نظرتون رو انتخاب کنید.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به awesomplete.min.js و awesomplete.css نیاز داریم. من این فایلهارو رو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید. حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. میبینید که یک input با کلاس awesomplete قرار دادیم. برای هر input که میخواید از این خاصیت پشتیبانی کنه ، باید همچنین کاری رو انجام بدین. بصورت زیر :

حالا میتونین به سادگی هر چه تمامتر اعضای لیست مورد نظرتون رو درون خاصیت data-list بنویسید ، بصورت زیر :

میبینید که بین هر عضو باید کاما ( , ) بزارید. بهمین سادگی. راههای متفاوت دیگه ای هم وجود داره ، که من یکی از اونا رو براتون توضیح میدم. در ابتدا باید یک input قرار بدین و یک id براش مشخص کنید ، بصورت زیر :

بعد از اون باید یک ul قرار بدین با id مشخص و اعضای مورد نظر رو در li قرار بدیم ، بصورت زیر :

حالا باید درون تگ script نهایی ، اونا رو بهم ربط بدین ، بصورت زیر :

بهمین سادگی. میتوین برای اون ul هم display : none قرار بدین ، تا نمایش داده نشه.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
Abbas412

بسیار زیبا بود جناب اسفندیاری
خواننده همیشگی مطالب و ابزارهای مفیدتون هستیم ❓ ❓

محمد اسفندیاری

باعث افتخاره
خواهش میکنم
موفق باشید

شهرام

با سلام. فقط با متن فارسی مشکل داره. تیکه تیکه نشان میده

محمد اسفندیاری

میتونین به صفحه Github این ابزار برین و این موضوع رو بیان کنید
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.