Membina widget Autocomplete JavaScript dengan Awesomplete

Autocomplete dalam aplikasi web meramalkan sisa perkataan atau ayat sebagai pengguna masuk. Pengguna biasanya menekan kekunci Tab untuk menerima cadangan, atau tekan kekunci anak panah bawah untuk menerima salah satu daripada pelbagai cadangan.

Tutorial ini akan menerangkan cara menggunakan Perpustakaan JavaScript Awesomplete untuk membuat komponen autocomplete di laman web anda. Awesomplete diasaskan oleh Lea Verou, seorang penceramah, penulis dan pakar yang terkenal dalam kumpulan kerja W3C CSS.

mata utama

Awesomplete adalah perpustakaan JavaScript yang ringan dan disesuaikan yang dibangunkan oleh Lea Verou untuk fungsi autocomplete dalam aplikasi web. Ia tidak mempunyai kebergantungan dan serasi dengan semua pelayar moden.
Untuk menggunakan Awesomplete, anda perlu memasukkan dua fail di laman web: Awesomplete.css dan Awesomplete.js. Komponen asas memerlukan elemen input dengan kelas "awesomplete", serta pilihan yang relevan dalam elemen datalist.
Awesomplete menyediakan pelbagai sifat, termasuk penapis, jenis, item, dan ganti, yang boleh digunakan untuk menyesuaikan komponen autokomplete. Ciri -ciri ini mengawal bagaimana penyertaan dipadankan, bagaimana item senarai disusun, bagaimana item senarai dijana, dan bagaimana pilihan pengguna menggantikan input pengguna.
Perpustakaan menyediakan pelbagai cara untuk menyesuaikan tingkah laku selanjutnya, serta lima peristiwa tersuai yang boleh digunakan untuk bertindak balas terhadap interaksi pengguna yang berbeza. Ia juga boleh digunakan dengan data dinamik dan sumber data jauh, menjadikannya alat yang serba boleh untuk meningkatkan pengalaman pengguna laman web.

Mengapa tidak menggunakan elemen Datalist HTML5?

Elemen Datalist HTML5 mungkin merupakan cara paling mudah untuk melaksanakan laman web autocomplete. Malangnya, elemen ini mempunyai sokongan penyemak imbas terhad dan pelaksanaannya tidak konsisten (mis. Chrome hanya sepadan dari awal, perlawanan Firefox di mana -mana sahaja). Ia juga mustahil untuk menggayakannya berdasarkan reka bentuk laman web anda, dan sambil menjanjikan, ini mungkin bukan pilihan yang tepat.

Awesomplete, sebaliknya, adalah komponen autocomplete ultra-ringan, disesuaikan yang boleh anda masukkan ke dalam halaman. Ia tidak mempunyai kebergantungan (tidak ada jQuery), ia berjalan pada semua pelayar moden, dan ia boleh digayakan mengikut tema laman web anda.

Jadi, apa yang kita tunggu? Mari mulakan!

Sertakan AwesOmplete

di halaman anda Untuk menggunakan Perpustakaan Awesomplete, kami memerlukan dua fail: Awesomplete.css dan Awesomplete.js.

anda boleh menggunakan Bower untuk mendapatkan fail ini:

juga boleh dimuat turun terus dari laman web Awesomplete.

<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>

atau, sertakan mereka dengan memasukkan CDN Rawgit (yang menyajikan fail asal terus dari GitHub dengan tajuk kandungan yang betul). Seperti yang ditunjukkan di bawah.

Untuk meniru komponen asas, anda memerlukan elemen input dengan kelas Awesomplete, serta pilihan yang relevan dalam elemen DATALIST. Atribut senarai elemen input mesti sepadan dengan ID elemen DATALIST. Ini adalah konfigurasi lalai yang munasabah, kerana ia menyediakan penyelesaian sandaran untuk mana -mana pengguna yang melumpuhkan JavaScript.

<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>

fungsi asas

Terdapat banyak cara untuk menggunakan perpustakaan pelbagai fungsi ini. Mari kita mulakan dengan kes penggunaan asas.

Gunakan atribut senarai data

Pilihan dalam elemen datalist di atas boleh dipindahkan ke atribut senarai data elemen input itu sendiri.

<link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css">
<input class="awesomplete" list="mylist" />
<datalist id="mylist">
  <option value="One">
  <option value="Two">
  <option value="Three">
</datalist>
<🎜>

menggunakan JavaScript

Penyelesaian di atas sangat berguna jika pilihan autocomplete anda adalah statik. Walau bagaimanapun, untuk membuat senarai secara dinamik dan selanjutnya menyesuaikan tingkah laku komponen autocomplete, kami memerlukan kaedah JavaScript.

<input class="awesomplete"
       data-minchars="1"
       data-maxitems="5"
       data-list="China, India, Japan, Russia, UK, USA" />

di sini, kami membuat objek awesomplete dan lulus dua parameter: rujukan kepada elemen input, dan objek literal yang mengandungi pilihan konfigurasi.

Kami kemudian menetapkan harta senarai objek AwesOmplete ke array yang memegang senarai pilihan autocomplete. Dalam demo berikut, saya memperluaskan array nama negara, menggunakan coretan kod berguna ini.

Juga ambil perhatian bahawa sifat Minchars, Maxitems, dan Autofirst adalah sama dengan data-minchars, data-maksitem, dan ciri-ciri data-autifirst dalam demonstrasi sebelumnya.

Apabila instantiating komponen autocomplete menggunakan JavaScript, kami mempunyai akses kepada banyak sifat, API, dan peristiwa lain. Mari kita lihat apa yang mereka dan bagaimana menggunakannya?

Properties JavaScript Extended

Objek Awesomplete menyokong empat sifat lain. Mereka adalah: penapis, menyusun, item dan menggantikan. Semua empat atribut diberikan fungsi.

Atribut penapis mengawal bagaimana penyertaan dipadankan. Fungsi panggilan baliknya mengambil dua parameter: teks cadangan semasa (jadi dalam contoh kami, setiap nilai dalam "China", "India", "Jepun", "Rusia", "UK", "Amerika Syarikat" pada gilirannya) dan rentetan yang mengandungi pengguna input. Secara lalai, input boleh dipadankan di mana sahaja dalam rentetan dan tidak sensitif.

Contoh berikut menunjukkan cara membuat Awesomplete melakukan padanan sensitif kes:

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

Sort Atribut Kawalan bagaimana item senarai disusun. Fungsi panggil baliknya mempunyai prototaip yang sama seperti fungsi array.prototype.sort ().

inilah cara menggunakannya untuk menyusun perlawanan dalam susunan abjad terbalik:

function myFilterFunc(text, input) {
  return text.indexOf(input) > -1;
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  filter: myFilterFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

atribut item mengawal cara menjana item senarai. Fungsi panggil balik ini juga mempunyai dua parameter: teks yang disyorkan dan input pengguna yang disyorkan. Ia harus mengembalikan item senarai. Berikut adalah cara menyerlahkan input pengguna dalam teks cadangan menggunakan atribut item:

function mySortFunc(text, input) {
  return text.localeCompare(input); // 修正此处，使用localeCompare进行排序
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  sort: mySortFunc
});
awesomplete.list = ['Albania', 'Brazil', 'Chile', 'Denmark', 'Egypt'];

atribut keempat dan terakhir ialah atribut ganti. Atribut ganti mengawal bagaimana pengguna memilih untuk menggantikan input pengguna. Berbanding dengan tiga fungsi sebelumnya, fungsi panggil balik ini menerima satu parameter: teks pilihan yang dipilih. Apabila pengguna memilih salah satu pilihan yang dicadangkan (contohnya, dengan mengkliknya), ia dicetuskan.

Berikut adalah cara menggunakannya untuk menukar pemilihan pengguna ke huruf besar:

function myItemFunc(text, input){
  return Awesomplete.$.create("li", {
    innerHTML: text.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"),
    "aria-selected": "false"
  });
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  item: myItemFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

Mengintegrasikan semua kandungan

Ini adalah demonstrasi yang menunjukkan cara menggabungkan fungsi penapis dan item dan hanya membuat cadangan selepas pengguna memasuki watak yang ditentukan (dalam kes ini koma diikuti dengan ruang):

menggali lebih mendalam, API dan Ajax

Perpustakaan ini mencetuskan lima acara tersuai. Ini adalah: Awecomplete-Select, Awecomplete-SelectComplete, Awecomplete-Open, Awecomplete-Close, dan Awecomplete-Highlight.

inilah cara menyambung ke setiap peristiwa ini:

<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>

Awesomplete menyediakan pelbagai kaedah pada objek Awesomplete yang membolehkan anda menyesuaikan tingkah lakunya:

1. buka (): Digunakan untuk membuka tetingkap pop timbul.
2. tutup (): Digunakan untuk menutup tetingkap pop timbul.
3. Seterusnya (): Digunakan untuk menyerlahkan item seterusnya dalam popup.
4. Sebelumnya (): Digunakan untuk menyerlahkan item sebelumnya dalam tetingkap pop timbul.
5. Goto (i): Digunakan untuk menyerlahkan item dengan indeks I dalam tetingkap pop timbul (-1 bermaksud menghilangkan semua item).
6. pilih (): Digunakan untuk memilih item yang diketengahkan sekarang, ganti nilai medan teks dengannya dan tutup tetingkap pop timbul.
7. Menilai (): Digunakan untuk menilai keadaan semasa komponen dan menjana semula senarai cadangan. Sekiranya tiada cadangan tersedia, tutup pop timbul. Kaedah ini amat berguna apabila menetapkan sifat senarai secara dinamik apabila tetingkap pop timbul dibuka.

Nota: Buka () tidak membuka senarai sebelum acara input dicetuskan, tetapi terdapat permintaan tarik pada laman utama projek yang harus menyelesaikan masalah ini.

berakhir

Sebagai contoh terakhir, inilah cara menggunakan Awesomplete dengan data yang diambil dari API jauh melalui AJAX. Saya akan menggunakan API Negara Rest di sini, yang menyediakan pengguna dengan banyak data negara.

Pertama, mulakan komponen tanpa menetapkan harta senarainya (saya menggunakan jQuery di sini untuk keringkasan):

<link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css">
<input class="awesomplete" list="mylist" />
<datalist id="mylist">
  <option value="One">
  <option value="Two">
  <option value="Three">
</datalist>
<🎜>

Kemudian, lampirkan pendengar acara keyup:

<input class="awesomplete"
       data-minchars="1"
       data-maxitems="5"
       data-list="China, India, Japan, Russia, UK, USA" />

Apabila pengguna menekan kekunci, kita perlu mendapatkan nilai elemen input dan membuat permintaan:

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

Dalam panggilan balik kejayaan, kita boleh melintasi respons JSON, dapatkan nama setiap bandar dan secara dinamik menetapkan atribut senarai objek Awesomplete:

function myFilterFunc(text, input) {
  return text.indexOf(input) > -1;
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  filter: myFilterFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

itu sahaja!

Kesimpulan

Dalam tutorial ini, kami melihat bagaimana untuk melaksanakan komponen autokomplet dengan mudah menggunakan perpustakaan Awesomplete yang ringan dan disesuaikan dalam projek anda. Projek ini masih dalam penyelenggaraan aktif dan saya menggalakkan anda untuk menyemaknya.

Soalan Lazim Mengenai JavaScript Autocomplete Components - Awesomplete's FAQ

Bagaimana cara memasang dan menggunakan awesomplete dalam projek saya?

Untuk memasang Awesomplete, anda boleh menggunakan NPM atau memuat turunnya terus dari repositori GitHub. Selepas pemasangan, masukkan fail AWESOMPLET.CSS dan AWESOMPLET.JS dalam fail HTML anda. Untuk menggunakan AWESOMPLETE, buat elemen input dalam HTML anda dan memulakan AWESOMPLETE dengan AWESOMPLETE baru (input). Anda kemudian boleh mengisi senarai dengan pelbagai cadangan.

Bolehkah saya menyesuaikan penampilan menu drop-down Awesomplete?

Ya, anda boleh menyesuaikan penampilan menu drop-down Awesomplete dengan menimpa kelas CSS dalam fail Awesomplete.css. Anda boleh menukar warna, fon, dan gaya lain untuk menyesuaikan reka bentuk laman web anda.

Bagaimana menggunakan Awesomplete dengan data dinamik?

AwesOmplete boleh digunakan dengan data dinamik dengan menggunakan harta senarai. Anda boleh menetapkan harta senarai ke array cadangan, yang secara automatik akan mengemas kini menu drop-down sebagai perubahan array.

Bolehkah saya menggunakan Awesomplete dengan sumber data jauh?

Ya, anda boleh menggunakan AwesOmplete dengan sumber data jauh menggunakan fungsi AJAX. Fungsi AJAX menerima URL dan fungsi panggil balik, yang mengambil data dari URL dan meluluskannya ke fungsi panggil balik.

Bagaimana menangani acara pemilihan dalam awesomplete?

Anda boleh menggunakan acara "Awesomplete-Select" untuk mengendalikan acara pemilihan dalam Aweesomplete. Acara ini dicetuskan apabila cadangan dipilih dan anda boleh menambah pendengar acara untuk mengendalikannya.

Bolehkah saya menggunakan Awesomplete dengan pelbagai medan input?

Ya, anda boleh menggunakan Awesomplete dengan medan input berganda. Anda hanya perlu membuat contoh Awesomplete baru untuk setiap medan input.

Bagaimana untuk menapis cadangan dalam awesomplete?

Anda boleh menggunakan fungsi penapis untuk menapis cadangan dalam Awesomplete. Fungsi penapis menerima cadangan dan nilai input, dan pulangan benar jika cadangan sepadan dengan nilai input.

Bolehkah saya menggunakan Awesomplete dengan perpustakaan JavaScript yang lain?

Ya, anda boleh menggunakan Awesomplete dengan perpustakaan JavaScript yang lain. Awesomplete adalah perpustakaan yang berdiri sendiri, jadi ia tidak mempunyai kebergantungan dan tidak bertentangan dengan perpustakaan lain.

bagaimana menyusun cadangan dalam awesomplete?

Anda boleh menggunakan fungsi jenis untuk menyusun cadangan dalam Awesomplete. Fungsi jenis menerima dua cadangan dan mengembalikan nombor negatif, sifar, atau positif mengikut urutan cadangan.

Bolehkah saya menggunakan awesomplete dalam bentuk saya?

Ya, anda boleh menggunakan AwesOmplete dalam borang anda. Selepas memilih cadangan, nilai medan input ditetapkan kepada cadangan, jadi ia boleh dikemukakan dengan borang.

Output yang disemak semula ini menangani isu -isu yang dibangkitkan dan memberikan penjelasan yang lebih komprehensif dan tepat mengenai fungsi Awesomplete.

Atas ialah kandungan terperinci Membina widget Autocomplete JavaScript dengan Awesomplete. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!