jquery autocompleter

Plugin Pelengkap Otomatis jQuery

Demo

Sini: Contoh dengan warna Crayola.

Penggunaan

Instalasi

npm:

npm install --save jquery-autocompleter

Benang:

yarn add jquery-autocompleter

Tambahkan plugin ke proyek Anda

• termasuk jQuery:

   < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " > </ script >

• sertakan kode plugin:

   <!-- Styles -->
  < link rel =" stylesheet " href =" css/jquery.autocompleter.css " />
  
  <!-- Scripts -->
  < script src =" js/jquery.autocompleter.min.js " > </ script >

• panggil pluginnya:

   $ ( "input" ) . autocompleter ( {
    /* options */
  } ) ; 

Contoh

• url jarak jauh

   $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
  } ) ;

• polos

   var data = [
    { value : 1 , label : "one" } ,
    { value : 2 , label : "two" } ,
    { value : 3 , label : "three" } ,
  ] ;
  
  $ ( function ( ) {
    $ ( "input" ) . autocompleter ( { source : data } ) ;
  } ) ; 

Pilihan

Pelengkap otomatis memiliki opsi berikut:

Nama	Jenis	Keterangan	Tuli
sumber	str, keberatan	URL ke server atau objek lokal	batal
sebagai Lokal	bodoh	Parsing respons jarak jauh sebagai sumber lokal	PALSU
kosong	bodoh	Luncurkan jika nilainya kosong	BENAR
membatasi	ke dalam	Jumlah hasil yang akan ditampilkan	10
minPanjang	ke dalam	Panjang minimum untuk pelengkapan otomatis	0
menunda	ke dalam	Beberapa milidetik untuk menunda permintaan	0
kelas khusus	susunan	Array dengan kelas khusus untuk elemen pelengkap otomatis	[]
cache	bodoh	Simpan data xhr ke localStorage untuk menghindari pengulangan permintaan	BENAR
cache Kedaluwarsa	ke dalam	data penyimpanan lokal seumur hidup dalam detik (0 untuk menonaktifkan masa berlaku cache)	86400
fokusTerbuka	bodoh	Luncurkan pelengkapan otomatis saat masukan mendapat fokus	BENAR
masukPilih	bodoh	Memungkinkan untuk memilih menggunakan tombol enter	BENAR
petunjuk	bodoh	Tambahkan petunjuk untuk memasukkan label pertama yang cocok, gaya yang benar harus dipasang	PALSU
pilihPertama	bodoh	Jika disetel ke true , elemen pertama dalam daftar pelengkapan otomatis akan dipilih secara otomatis, abaikan jika changeWhenSelect aktif	PALSU
ubahKetikaPilih	bodoh	Memungkinkan untuk mengubah nilai input menggunakan navigasi tombol panah dalam daftar pelengkapan otomatis	BENAR
highlightMatches	bodoh	Opsi ini mendefinisikan bungkus tag <strong> untuk kecocokan dalam hasil pelengkapan otomatis	PALSU
diabaikanKode Kunci	susunan	Array dengan kode kunci yang dapat diabaikan, secara default: 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145	[]
label khusus	str	Nama properti objek yang akan digunakan sebagai label	PALSU
Nilai khusus	str	Nama properti objek yang akan digunakan sebagai nilai	PALSU
diSebelumKirim	fungsi	Fungsi ini dipicu sebelum permintaan ajax	$.noop
diSebelum Pertunjukan	fungsi	Fungsi ini dipicu ketika daftar siap ditampilkan	$.noop
diKosong	fungsi	Jika daftar data kosong, picu fungsi ini	$.noop
padaItem	fungsi	Fungsi ini dipicu ketika setiap item sedang dipersiapkan untuk ditampilkan	$.noop
diListOpen	fungsi	Fungsi ini dipicu ketika daftar ditampilkan	$.noop
diListClose	fungsi	Fungsi ini dipicu ketika daftar disembunyikan	$.noop
padaSebelum Peluncuran	fungsi	Peristiwa ini dipicu sebelum permintaan baru (termasuk cache lokal)	$.noop
templat	str	Templat khusus untuk item daftar. Misalnya: <span>{{ label }} is {{ customPropertyFromSource }}</span> . Templat ditambahkan ke .autocompleter-item .	PALSU
mengimbangi	str	Offset respons sumber, misalnya: "response.items.posts" . @tidak digunakan lagi menggunakan format sebagai gantinya	PALSU
format	fungsi	Format payload respons untuk mengembalikan data sumber	batal
menggabungkan	fungsi	Mengembalikan objek yang memperluas data ajax. Berguna jika Anda ingin meneruskan beberapa opsi server tambahan	$.noop
panggilan balik	fungsi	Pilih fungsi panggilan balik nilai. Argumen: value , index , object	$.noop

Metode

Ubah opsi setelah plugin ditentukan

 $ ( "#input" ) . autocompleter ( "option" , data ) ;

Misalnya:

 $ ( "#input" ) . autocompleter ( "option" , {
  limit : 5 ,
  template :
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ; 

Buka daftar

 $ ( "#input" ) . autocompleter ( "open" ) ; 

Tutup daftar

 $ ( "#input" ) . autocompleter ( "close" ) ; 

Hancurkan plugin

 $ ( "#input" ) . autocompleter ( "destroy" ) ; 

Hapus semua cache

 $ . autocompleter ( "clearCache" ) ; 

Tetapkan default

 $ . autocompleter ( "defaults" , {
  customClass : "myClassForAutocompleter" ,
} ) ; 

Satu contoh lagi

Pelengkap otomatis untuk input nama depan dengan caching, penyorotan kecocokan, dan batas 5 hasil. Respons jarak jauh bergantung pada gender:

Markup formulir

 < fieldset >
  < label > Male </ label >
  < input type =" radio " name =" gender " value =" male " checked =" checked " />

  < label > Female </ label >
  < input type =" radio " name =" gender " value =" female " />

  < label > Other </ label >
  < input type =" radio " name =" gender " value =" other " />

  < label > First Name </ label >
  < input type =" text " name =" firstname " id =" firstname " />
</ fieldset > 

Kode

 $ ( function ( ) {
  $ ( "#firstname" ) . autocompleter ( {
    source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
    limit : 5 ,
    cache : true ,
    combine : function ( params ) {
      var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;

      // passing params to match endpoint
      return {
        q : params . query ,
        count : params . limit ,
        gender : gender ,
      } ;
    } ,
    format : function ( data ) {
      // map response data to match autocompleter
      return data . entries . map ( function ( item ) {
        return {
          label : item . name ,
          value : item . slug ,
        } ;
      } ) ;
    } ,
    callback : function ( value , index , object ) {
      console . log (
        "Value " + value + " are selected (with index " + index + ")."
      ) ;
      console . log ( object ) ;
    } ,
  } ) ;
} ) ; 

Menandai

div (node) -> ul (list) -> li (item) .

 < div class =" autocompleter " id =" autocompleter-1 " >
  < ul class =" autocompleter-list " >
    < li class =" autocompleter-item " > First </ li >
    <!-- ... -->
    < li class =" autocompleter-item " > Last </ li >
  </ ul >
</ div >