autocomplete

Pustaka JavaScript yang memungkinkan Anda membuat pengalaman pelengkapan otomatis dengan cepat

Yang Anda perlukan untuk memulai adalah:

• Sebuah wadah untuk memasukkan pengalaman ke dalamnya
• Data untuk mengisi pelengkapan otomatis
• Solusi Virtual DOM apa pun (JavaScript, Preact, React, Vue, dll.)

Data yang mengisi hasil pelengkapan otomatis disebut sumber. Anda dapat menggunakan apa pun yang Anda inginkan di sumber Anda: kumpulan istilah penelusuran statis, hasil penelusuran dari sumber eksternal seperti indeks Algolia, penelusuran terkini, dan banyak lagi.

Dengan mengonfigurasi hanya dua parameter yang diperlukan ( container dan getSources ), Anda dapat memperoleh pengalaman pelengkapan otomatis interaktif. Pustaka membuat masukan dan menyediakan atribut interaktivitas dan aksesibilitas, namun Anda memegang kendali penuh atas elemen DOM ke keluaran .

Dokumentasi • API • Taman Bermain

Instalasi

Cara yang disarankan untuk memulai adalah dengan paket autocomplete-js . Ini mencakup semua yang Anda perlukan untuk merender pengalaman pelengkapan otomatis JavaScript.

Jika tidak, Anda dapat menginstal paket autocomplete-core jika Anda ingin membuat perender dari awal.

Semua paket Pelengkapan Otomatis tersedia di registri npm.

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

Jika Anda tidak menggunakan pengelola paket, Anda dapat menggunakan elemen script HTML:

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

Penggunaan

Untuk memulai, Anda memerlukan wadah untuk melengkapi otomatis Anda. Jika Anda belum memilikinya, Anda dapat memasukkannya ke dalam markup Anda:

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

Kemudian, masukkan pelengkapan otomatis Anda ke dalamnya dengan memanggil fungsi autocomplete dan menyediakan container . Ini bisa berupa pemilih CSS atau Elemen.

Pastikan untuk menyediakan wadah (misalnya div ), bukan input . Pelengkapan otomatis menghasilkan kotak pencarian yang dapat diakses sepenuhnya untuk Anda.

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

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

Lanjutkan membaca panduan Memulai kami.

Dokumentasi

Dokumentasi menawarkan beberapa cara untuk mempelajari pustaka Pelengkapan Otomatis:

• Baca Konsep Inti untuk mempelajari lebih lanjut tentang prinsip-prinsip yang mendasarinya, seperti Sumber dan Keadaan .
• Ikuti Panduan untuk memahami cara membangun pola UX umum.
• Lihat referensi API untuk daftar lengkap parameter dan opsi.
• Cobalah Playground di mana Anda dapat melakukan implementasi dasar dan bermain-main.

Anda dapat menemukan lebih banyak di dokumentasi.

Mendukung

• Diskusi GitHub

Paket

Kemasan	Keterangan	Dokumentasi
autocomplete-js	Paket JavaScript untuk Pelengkapan Otomatis	Dokumentasi
autocomplete-core	Primitif inti JavaScript untuk membangun pengalaman pelengkapan otomatis	Dokumentasi
autocomplete-plugin-recent-searches	Sebuah plugin untuk menambahkan pencarian terkini ke Pelengkapan Otomatis	Dokumentasi
autocomplete-plugin-query-suggestions	Sebuah plugin untuk menambahkan saran kueri ke Pelengkapan Otomatis	Dokumentasi
autocomplete-plugin-algolia-insights	Sebuah plugin untuk menambahkan Algolia Insights ke Pelengkapan Otomatis	Dokumentasi
autocomplete-plugin-redirect-url	Sebuah plugin untuk mengaktifkan URL pengalihan	Dokumentasi
autocomplete-plugin-tags	Sebuah plugin untuk mengelola dan menampilkan daftar tag di Pelengkapan Otomatis	Dokumentasi
autocomplete-preset-algolia	Preset untuk menggunakan fitur Algolia dengan Pelengkapan Otomatis	Dokumentasi
autocomplete-theme-classic	Tema klasik untuk Pelengkapan Otomatis	Dokumentasi

Memamerkan

Lihat pengalaman luar biasa yang dibuat orang-orang dengan Pelengkapan Otomatis:

Pencarian Dokumen	Dokumentasi Algolia

Temukan lebih banyak di Etalase kami.

Kotak pasir

Periksa kotak pasir menggunakan Pelengkapan Otomatis.

Lisensi

MIT