Advertisement
  1. Code
  2. Web Development

Bagaimana menggunakan jQuery UI Autocomplete Widget

Scroll to top
Read Time: 10 min

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Dalam tutorial ini kita akan melihat di salah satu komponen terbaru jQuery UI 1,8 - Autocomplete widget. Auto-completing text Field dapat menjadi pilihan yang populer dengan pengunjung ke situs Anda karena mereka membuat memasukkan informasi lebih mudah. Mereka dapat digunakan pada bidang Cari produk misalnya, atau ketika pengunjung harus memasukkan sebuah negara, atau kota, atau apa pun yang mungkin pilihan yang dari dataset umum. Selain menjadi populer dengan pengunjung, jQuery UI Autocomplete ini populer dengan pengembang karena mudah digunakan, kuat dan fleksibel.

Saya bukan penggemar besar dari Facebook, saya lebih memilih Twitter (@danwellman btw), tapi satu fitur Facebook saya suka fitur pesan yang memungkinkan Anda mengirim pesan kepada teman atau teman. Aku seperti bagaimana autocomplete digunakan untuk membuat memilih nama teman Anda lebih mudah, dan format nama setelah mereka telah dipilih dan ditambahkan ke bidang 'ke', misalnya mereka setiap link erat di dalamnya yang memungkinkan nama agar mudah dikeluarkan tanpa perlu se Lect teks apapun.

Dalam tutorial ini kita akan menggunakan jQuery UI Autocomplete widget untuk mereplikasi aspek sistem pesan Facebook. Kita tidak akan melihat benar-benar mengirim pesan namun. Ini adalah apa yang akan kita membuat:


Langkah 1 Persiapan

Kita akan perlu untuk membangun kustom download jQuery UI yang mengandung hanya komponen yang kita butuhkan; kepala ke builder download di http://jqueryui.com/download. Kita harus menggunakan komponen inti berikut:

  • Core
  • Widget
  • Position

Kita juga akan perlu Autocomplete widget itu sendiri sehingga memastikan bahwa hanya di atas item, serta Autocomplete, diperiksa di bagian komponen di sebelah kiri. Menggunakan tema default (UI Lightness) dan memastikan bahwa versi 1,8 telah dipilih di bagian kanan.

Setelah download, membuat folder baru pada komputer Anda dan menyebutnya autocomplete. Kemudian membuka arsip dan copy folder css dan js ke folder baru yang baru saja dibuat. Ini akan memberikan Anda semua Perpustakaan file yang diperlukan untuk contoh ini termasuk jQuery itu sendiri, jadi ini tidak perlu didownload secara terpisah.


Langkah 2 HTML dasar

Mari kita lihat HTML untuk <form> pertama-tama:

Ini adalah bentuk cukup standar; ada container luar <div> kita dapat menggunakan untuk styling dan <input> Autocomplete akan dilampirkan juga dalam <div> elemen; kami akan styling <input> sehingga tersembunyi, dan kami akan styling <div> sehingga tampak seperti bidang lain dalam form. Kami memberikan wadah untuk <input> nama kelas ui-helper-clearfix untuk membuat penggunaan kelas utilitas ini dari jQuery UI CSS framework.

Kita juga harus link ke file kami membongkar dari jQuery UI arsip, serta kustom stylesheet; file-file berikut harus pergi ke <head> Halaman:

File-file berikut harus pergi pada akhir <body>:


Langkah 3 Styling Form

Kami menggunakan tema yang sangat sederhana dan netral dalam contoh ini, paling diantaranya adalah murni sebagai contoh. Sangat sedikit gaya diperlukan dan sebagian dapat diubah jika diperlukan. CSS berikut digunakan dalam autocomplete.css style sheet (semua jQuery UI styling adalah dalam jquery-ui-1.8.custom.css style sheet):

 Untuk memberikan bentuk perbatasan transparan yang bagus dengan sudut membulat kita menggunakan aturan RGBa CSS3 dan -moz-border-radius, -webkit-border-radius dan border-radius rules; browser paling populer sekarang mendukung aturan ini, termasuk Firefox, Safari, Chrome, dan Opera. IE tidak mendukung keduanya, dan meskipun ia dapat menggunakan filter untuk mengimplementasikan opasitas rudimenter, sudut membulat perlu didukung melalui penggunaan gambar. Efektivitas transparansi RGBa tidak ditunjukkan secara maksimal dalam contoh ini; tetapi jenis formulir ini mungkin akan digunakan sebagai hamparan modal mengambang dalam implementasi penuh, yang akan duduk di atas konten yang sebenarnya di halaman.

Container <div> di sekitar <input> field yang Autocomplete text field akan melampirkan diberikan posisi yang sama dan styling sebagai <input> elemen, tetapi <input> dalam wadah ini memiliki perbatasan dihapus sehingga tersembunyi. Kami juga mengurangi lebar dan mengapung ke kiri. Ini adalah sehingga ketika kita menambahkan penerima diformat untuk <div> The <input> tidak akan meluap dan meningkatkan ketinggian <div> tidak perlu.

Kami juga styling para penerima yang akan ditambahkan ke <div> sebagai elemen <span> yang berisi tautan. Sebagian besar ini ditata untuk mencocokkan tema dasar dan diberi Sudut lengkung. Sangat penting bahwa unsur-unsur ini dibuat tingkat blok dan juga mengambang sehingga mereka menumpuk benar. Kita juga perlu untuk mengganti beberapa styling Automcomplete yang disediakan oleh jQuery UI tema kita menggunakan; pemilih terakhir hanya mencegah saran individu dalam menu melanggar antara kata-kata, yang terjadi karena kami telah membuat <input> dikaitkan dengan begitu kecil.

Pada tahap ini, form akan muncul seperti ini:


Langkah 4 Melampirkan Autocomplete

Selanjutnya kita perlu melampirkan Autocomplete widget untuk <input> dalam <div>; untuk melakukan hal ini kita dapat menggunakan script berikut:

Widget melampirkan <input> menggunakan metode autocomplete(). Kami menyediakan objek literal sebagai argumen untuk metode, yang mengkonfigurasi opsi sumber dan pilih dan mengubah event callback.

Sumber pilihan ini digunakan untuk memberitahu widget mana untuk mendapatkan saran untuk menu Autocomplete dari. Kami menggunakan fungsi sebagai nilai pilihan ini, yang menerima dua argumen; yang pertama adalah istilah yang dimasukkan ke dalam <input>, yang kedua adalah fungsi callback yang digunakan untuk menyampaikan saran kembali ke widget.

Dalam fungsi ini, kami menggunakan jQuery's getJSON() metode untuk lulus istilah untuk sisi server file PHP. PHP file akan menggunakan istilah untuk mengekstrak nama-nama kontak dari MySql database yang cocok. Kami menggunakan JSONP callback untuk memproses data kembali dari server; fungsi callback yang dilewatkan sebagai argumen kedua ke opsi sumber mengharapkan untuk menerima data dalam array, jadi kita pertama menciptakan array kosong dan kemudian menggunakan jQuery's each() metode untuk memproses setiap item dalam array JSON yang dikembalikan oleh server. Kami hanya iterate atas setiap item dalam array, dan menambahkan saran setiap ke array baru kami. Setelah kami array yang baru dibangun kami melewati itu untuk fungsi panggilan balik untuk widget untuk menampilkan menu.

Kami kemudian mendefinisikan seorang pawang untuk custom select event Pelengkapan Otomatis; fungsi ini akan dijalankan oleh widget setiap kali saran dipilih dari menu Pelengkapan Otomatis. Fungsi ini secara otomatis dilewatkan dua argumen - objek acara dan objek ui yang berisi saran yang dipilih. Kami menggunakan fungsi ini untuk format nama Penerima dan menambahkannya ke <div>. Kami cukup buat <span> elemen terus teks dan elemen jangkar yang dapat digunakan untuk menghapus Penerima. Setelah diformat penerima telah dibuat kita hanya menyisipkan langsung sebelum disamarkan <input>.

Terakhir kami tambahkan handler untuk change event; fungsi ini akan dijalankan setiap kali nilai <input> bahwa Autocomplete dikaitkan dengan perubahan. Kami hanya menggunakannya untuk menghapus nilai dari <input> karena kami sudah telah menambahkan versi format kontainer kami <div>. Carat tampak sedikit tinggi setelah nama kontak diformat telah ditambahkan ke <div> Jadi kita juga menggunakan pengendali event ini untuk memperbaiki hal ini.

Ini adalah semua konfigurasi yang kita butuhkan untuk pelaksanaan tertentu ini, tetapi masih ada beberapa fungsi tambahan yang kita perlu menambahkan hal-hal rapi sedikit. Setelah metode autocomplete() Tambahkan kode berikut:

The <input> bahwa Autocomplete kami melekat sebagian tersembunyi dan wadah <div> yang ditata sehingga muncul seperti bidang lain pada formulir; untuk menyelesaikan penipuan, kita tambahkan handler klik ke container <div> sehingga mengklik di manapun dalam berfokus aktual <input>. Visual dan fungsional sekarang <div> harus dibedakan dari field biasa.

Kita juga perlu untuk menangani klik pada jangkar yang ditambahkan ke setiap penerima yang diformat; Kami menggunakan jQuery's live() metode karena elemen ini mungkin atau mungkin tidak ada pada halaman pada waktu tertentu dan lebih mudah daripada mengikat fungsi pengendali setiap kali kita membuat salah satu Anchor ini. Setiap kali salah satu Anchor ini diklik semua yang kita lakukan adalah menavigasi induk jangkar yang diklik dan kemudian menghapusnya dari halaman. Ingat ketika kita dikoreksi posisi carat sebelumnya dalam script? Kita hanya perlu untuk memeriksa apakah semua penerima telah dihapus dan jika begitu, reset posisinya kembali ke pengaturan.


Langkah 5 Tambahan Kode dan Sumber Daya

Saya menggunakan database MySql yang berisi tabel daftar masing-masing nama Penerima, dan file PHP berikut untuk menerima data yang dikirim oleh getJSON() metode dan tarik pencocokan penerima dari database:

Untuk menjalankan download contoh file, Anda akan memerlukan pengembangan web server dengan PHP diinstal dan dikonfigurasi, serta MySql dan database yang tepat dan meja. Ketika Surat diketik ke bidang 'ke', Surat ini dikirimkan ke server dan digunakan untuk menarik keluar setiap nama yang dimulai dengan huruf yang telah diketik. Nama pencocokan kemudian berlalu kembali ke halaman sebagai JSON JSON dan ditampilkan dalam menu saran:

Tutorial ini menunjukkan bagaimana mereplikasi pengiriman formulir pesan Facebook, secara khusus, teman-teman cara yang ditambahkan ke formulir pesan sebagai penerima menggunakan Autocomplete, dan format nama teman setelah mereka telah ditambahkan sehingga mereka dapat dengan mudah dihapus. Contoh formulir kami benar-benar tidak melakukan apa pun, tapi apa yang kita perlu lakukan untuk benar-benar mengirimkan formulir akan untuk melewati isi dari bentuk ke file sisi server untuk mengirimkan menggunakan AJAX, yang dapat dengan mudah terhubung ke peristiwa yang menyerahkan tombol Kirim yang digunakan untuk m.

Penerima akan perlu untuk memiliki beberapa jenis makna bagi sistem back-end tentu saja, dan mungkin dapat dipetakan ke alamat e-mail dalam database. Kita akan perlu untuk mengambil konten teks dari masing-masing <span> elemen sebelum kembali ke server, meskipun ini akan cukup sepele.

JQuery UI Autocomplete widget membuatnya mudah untuk terhubung ke setiap datasource dan berisi kaya suite event handler yang kami dapat menyediakan fungsi untuk bereaksi terhadap teks yang dimasukkan ke dalam bidang yang berhubungan, atau saran yang dipilih dari menu. Widget ini bergaya menggunakan jQuery UI luas CSS kerangka dan dapat dengan mudah diubah sehingga cocok tema situs Anda yang sudah ada. Semua dalam semua, itu adalah sangat baik widget yang mudah digunakan dan menyediakan fungsi yang besar.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.