autocomplete

مكتبة JavaScript تتيح لك إنشاء تجارب الإكمال التلقائي بسرعة

كل ما تحتاجه للبدء هو:

• حاوية لحقن الخبرة فيها
• البيانات التي سيتم ملء الإكمال التلقائي بها
• أي حل افتراضي لـ DOM (JavaScript، وPreact، وReact، وVue، وما إلى ذلك)

تسمى البيانات التي تملأ نتائج الإكمال التلقائي بالمصادر. يمكنك استخدام ما تريد في مصادرك: مجموعة ثابتة من مصطلحات البحث، ونتائج البحث من مصدر خارجي مثل فهرس Algolia، وعمليات البحث الأخيرة، والمزيد.

من خلال تكوين هاتين المعلمتين المطلوبتين فقط ( container و getSources )، يمكنك الحصول على تجربة الإكمال التلقائي التفاعلية. تقوم المكتبة بإنشاء مدخلات وتوفر سمات التفاعل وإمكانية الوصول، ولكنك تتمتع بالتحكم الكامل في عناصر DOM لإخراجها .

التوثيق • API • الملعب

تثبيت

الطريقة الموصى بها للبدء هي باستخدام حزمة autocomplete-js . يتضمن كل ما تحتاجه لتقديم تجربة الإكمال التلقائي لجافا سكريبت.

بخلاف ذلك، يمكنك تثبيت حزمة autocomplete-core إذا كنت تريد إنشاء عارض من البداية.

جميع حزم الإكمال التلقائي متاحة في سجل npm.

yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js

إذا كنت لا تستخدم مدير الحزم، فيمكنك استخدام عنصر script HTML:

 < script src =" https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js " > </ script >
< script >
  const { autocomplete } = window [ '@algolia/autocomplete-js' ] ;
</ script > 

الاستخدام

للبدء، تحتاج إلى حاوية للإكمال التلقائي. إذا لم يكن لديك واحدة بالفعل، يمكنك إدراج واحدة في الترميز الخاص بك:

 < div id = "autocomplete" > < / div >

ثم أدخل الإكمال التلقائي الخاص بك فيه عن طريق استدعاء وظيفة autocomplete وتوفير container . يمكن أن يكون محدد CSS أو عنصرًا.

تأكد من توفير حاوية (على سبيل المثال، div )، وليس input . يقوم الإكمال التلقائي بإنشاء مربع بحث يمكن الوصول إليه بشكل كامل لك.

 import { autocomplete } from '@algolia/autocomplete-js' ;

autocomplete ( {
  container : '#autocomplete' ,
  // ...
} ) ;

استمر في قراءة دليل البدء الخاص بنا.

التوثيق

توفر الوثائق عدة طرق للتعرف على مكتبة الإكمال التلقائي:

• اقرأ المفاهيم الأساسية لمعرفة المزيد حول المبادئ الأساسية، مثل المصادر والحالة .
• اتبع الأدلة لفهم كيفية إنشاء أنماط تجربة المستخدم الشائعة.
• ارجع إلى مرجع واجهة برمجة التطبيقات (API) للحصول على قائمة شاملة بالمعلمات والخيارات.
• جرّب ساحة اللعب حيث يمكنك تنفيذ تطبيق أساسي والتجربة.

يمكنك العثور على المزيد في الوثائق.

يدعم

• مناقشات جيثب

الحزم

طَرد	وصف	التوثيق
autocomplete-js	حزمة جافا سكريبت للإكمال التلقائي	التوثيق
autocomplete-core	أساسيات جافا سكريبت الأساسية لبناء تجربة الإكمال التلقائي	التوثيق
autocomplete-plugin-recent-searches	مكون إضافي لإضافة عمليات البحث الأخيرة إلى الإكمال التلقائي	التوثيق
autocomplete-plugin-query-suggestions	مكون إضافي لإضافة اقتراحات الاستعلام إلى الإكمال التلقائي	التوثيق
autocomplete-plugin-algolia-insights	مكون إضافي لإضافة Algolia Insights إلى الإكمال التلقائي	التوثيق
autocomplete-plugin-redirect-url	مكون إضافي لتمكين عناوين URL لإعادة التوجيه	التوثيق
autocomplete-plugin-tags	مكون إضافي لإدارة وعرض قائمة العلامات في الإكمال التلقائي	التوثيق
autocomplete-preset-algolia	الإعدادات المسبقة لاستخدام ميزات Algolia مع الإكمال التلقائي	التوثيق
autocomplete-theme-classic	الموضوع الكلاسيكي للإكمال التلقائي	التوثيق

عرض

شاهد التجارب الرائعة التي أنشأها الأشخاص باستخدام الإكمال التلقائي:

بحث الوثيقة	توثيق ألجوليا

اكتشف المزيد في معرضنا .

صناديق الرمل

تحقق من صناديق الحماية باستخدام الإكمال التلقائي.

رخصة

معهد ماساتشوستس للتكنولوجيا