Pelengkap pemalam autolengkap jQuery dengan kod sumber download_jquery

Apabila kita memasukkan borang, jika kita ingin memasukkan alamat e-mel, dsb., kita hanya perlu memasukkan bahagian pertama nama e-mel, kemudian kandungan selepas @ akan dilengkapkan secara automatik, dan beberapa alamat e-mel yang biasa digunakan akan disenaraikan, dan pengguna hanya perlu memilihnya. Input masa dan nama domain boleh dilengkapkan secara automatik Ini semua dilaksanakan oleh pelengkap pemalam untuk anda.

Paparan kesan adalah seperti berikut:

Paparan kesan Muat turun kod sumber

HTML

Mula-mula muatkan perpustakaan jQuery dan plug-in completer.js, dan sudah tentu fail gaya CSS yang berkaitan, yang semuanya dibungkus dalam muat turun kod sumber.

<script src="jquery.js"></script> 
<script src="completer.js"></script> 
<link href="completer.css" rel="stylesheet"> 

Seterusnya, kami meletakkan kod berikut di mana kotak input perlu diletakkan pada halaman Ini adalah borang input yang memerlukan pengguna memasukkan alamat e-mel mereka.

<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail"> 

Javascript

Amat mudah untuk memanggil $(element).completer() secara terus Jika anda tidak mahu menggunakan panggilan fungsi, anda juga boleh menggunakan atribut data-toggle="completer" dan data-* pada elemen untuk. panggil kesan pemalam.

$(function(){ 
 $("#auto-complete-email").completer({ 
  separator: "@", 
  source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"] 
 }); 
}); 

Tetapan pilihan

Pilihan	Penerangan	Nilai lalai
lengkap	Menyala apabila input selesai	fungsi() {}
Teg item	Senaraikan teg elemen dalam panel paparan pop timbul	"li"
penapis	Fungsi penapis, selepas input, ia akan menapis kandungan senarai yang berkaitan dan kemudian memaparkan senarai	fungsi(val) { return val }
kedudukan	Kedudukan panel senarai timbul berbanding kotak input, nilainya ialah "atas", "kanan", "bawah", "kiri".	"bawah"
sumber	Data yang dipaparkan akan dilengkapkan secara automatik	[]
Kelas terpilih	Gaya apabila pilihan dalam panel timbul dipilih	"dipilih lebih lengkap"
pemisah	pemisah, memisahkan kandungan input daripada bahagian autolengkap yang dicadangkan, seperti @	""
cadangkan	Jika ditetapkan kepada benar, ia akan memasuki mod cadangan dan secara automatik sepadan dengan kandungan yang dimasukkan	palsu
templat	Templat untuk panel timbul	" "
zIndex	Nilai indeks-Z dalam css panel timbul	1

Pemalam yang lebih lengkap menyediakan tetapan pilihan yang kaya dan panggilan kaedah.