illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

4 1566 ۱۸ اسفند ۹۳

در این مطلب میخوام یک ابزار بنام 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 قرار بدین ، تا نمایش داده نشه.

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏
    شهرام(۱۲ مهر ۱۳۹۴)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram