کتابخانه
@algolia/autocomplete-js یه کتابخونه جاوااسکریپته برای ساختن کادر جستجوی خودکار تکمیل. کاربر توی کادر تایپ می کنه و پیشنهادها همون لحظه زیرش باز می شن. منبع داده می تونه API خودت باشه یا سرویس Algolia. برای موبایل هم حالت مخصوص داره و کار با کیبورد و دسترس پذیری رو خودش انجام می ده.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۳۷۷ کیلوبایت· ۳۷ فایل· انتشار
SHA-256: 14021afd1b887acf39e91550fa0880206f7feab1e1d6c7898606d744b92e639f
@algolia/autocomplete-js کتابخونه ای از شرکت Algolia برای ساختن کادر جستجوی خودکار تکمیله. کاربر شروع می کنه به تایپ و زیر کادر لیستی از پیشنهادها باز می شه: محصول، مقاله، دسته بندی، جستجوهای قبلی یا هر چیز دیگه ای که بخوای. کارهای خسته کننده ای مثل کار با کلیدهای صفحه کلید، باز و بسته شدن پنل پیشنهادها و رعایت دسترس پذیری رو هم خودش انجام می ده.
ساختن یه autocomplete درست از صفر ظاهر ساده ای داره، ولی جزئیاتش زیاده: فلش بالا و پایین، Enter، Escape، پشتیبانی از screen reader، رفتار روی موبایل. اینجا همه اینا آماده هست و تو فقط می گی پیشنهادها از کجا بیان و چطور نشون داده بشن. یه نکته مهم: استفاده از سرویس ابری Algolia اجباری نیست. منبع داده یه تابع معمولی جاوااسکریپته که لیستی از آیتم ها رو برمی گردونه. این لیست می تونه از یه فایل JSON، از REST API وردپرس، از دیتابیس خودت یا از یه موتور جستجوی داخلی بیاد. برای سایت های ایرانی این خیلی به درد می خوره، چون دسترسی به سرویس های خارجی همیشه پایدار نیست.
این کتابخونه برای فروشگاه های اینترنتی، وبلاگ ها و سایت های پرمحتوا مناسبه. پنل های مدیریتی که بین کلی رکورد جستجوی سریع می خوان هم می تونن ازش استفاده کنن. اگه قالب وردپرسی سفارشی داری و می خوای کادر جستجوی سایت رو حرفه ای تر کنی، گزینه خوبیه. ولی اگه فقط یه لیست ثابت و کوچیک برای انتخاب توی یه فرم داری، این کتابخونه برات زیادی سنگینه و یه select ساده کافیه. اگه هم نمی خوای هیچ کدی بنویسی، یه افزونه آماده جستجوی وردپرس راحت تره، چون اینجا کمی برنامه نویسی لازمه.
موقع انتخاب و استفاده چند نکته رو یادت نگه دار. ظاهر کادر رو با یه فایل استایل و قالب آماده می شه تنظیم کرد و بعدش با CSS خودت شخصی سازی کرد. چون سایتت فارسیه، حتما راست چین بودن پنل پیشنهادها و فونتش رو تست کن. اگه منبع داده ات یه API روی هاست اشتراکیه، تعداد درخواست ها رو کم نگه دار تا با هر حرفی که کاربر تایپ می کنه سرور اذیت نشه. نسخه های رسمی و بدون تغییر این کتابخونه توی مخزن داخلی ما هم هست، پس وقتی دسترسی به npm یا CDN های خارجی مشکل داره، می تونی از همین جا برداری.
اول فایل جاوااسکریپت و فایل استایل رو از همین صفحه بگیر. اگه پروژه ات ابزار بیلد داره، می تونی بسته رو با npm هم نصب کنی. مراحل کلی این طوریه:
آخرش سایت رو روی موبایل و با راست چین تست کن. اگه چیزی به هم ریخته بود، معمولا با چند خط CSS درست می شه.
نه. این کتابخونه به خودی خود به سرویس Algolia وصل نیست. منبع پیشنهادها یه تابع جاوااسکریپته که خودت می نویسی و هر داده ای می تونه برگردونه، مثل نتیجه API وردپرس، یه فایل JSON یا موتور جستجوی خودت. اگه بخوای از سرویس خود Algolia هم استفاده کنی، بسته های جدایی برای اتصال بهش هست.
فایل های جاوااسکریپت و CSS رو توی قالب یا یه افزونه کوچیک خودت لود کن، یه عنصر خالی توی صفحه بذار و autocomplete رو بهش وصل کن. برای منبع داده هم می تونی از REST API خود وردپرس استفاده کنی تا پیشنهادها از نوشته ها و محصولات سایت خودت بیان.
تایپ و نمایش متن فارسی مشکل خاصی نداره، ولی جهت و ظاهر پنل رو باید روی سایت خودت تست کنی. معمولا با چند خط CSS برای راست چین کردن و تنظیم فونت همه چیز مرتب می شه. کیفیت جستجوی فارسی هم بیشتر به منبع داده ات بستگی داره تا به این کتابخونه.
نه، نسخه js بدون فریم ورک توی هر صفحه معمولی کار می کنه. کافیه فایل جاوااسکریپت و استایل رو توی صفحه لود کنی و تابع autocomplete رو صدا بزنی. اگه پروژه ات React داره، مستندات رسمی رو برای روش پیشنهادی ببین. برای ساختن رابط دلخواه هم بسته های جدا و هسته ای وجود داره.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.