jquery searchable

Plugin jQuery yang Dapat Dicari

Versi terbaru: v1.1.0 (Lihat log perubahan)

Plugin jQuery yang kecil dan cepat untuk mencari elemen saat Anda mengetik. Plugin ini dibuat dan dikelola oleh Stidges ( Twitter | Github ).

Fitur

• Ringan . Plugin ini hanya ~1kB yang diperkecil dan di-gzip!
• Cepat . Plugin ini dioptimalkan untuk pencarian yang cepat dan tanpa jeda bahkan melalui kumpulan elemen yang besar.
• Berbagai jenis pencarian . Plugin ini menyediakan tiga jenis pencarian berbeda secara langsung! Pencocokan fuzzy, pencocokan ketat (peka huruf besar-kecil) dan pencocokan default (tidak peka huruf besar-kecil).
• Striping baris otomatis . Saat menelusuri tabel, baris disembunyikan jika tidak cocok. Saat menggunakan kerangka CSS seperti Bootstrap ini akan mengacaukan striping tabel Anda. Plugin ini memungkinkan Anda menentukan CSS untuk diterapkan pada baris ganjil dan genap, dan memperbaruinya saat mencari.
• Tampilkan/sembunyikan khusus . Anda dapat menentukan fungsi khusus untuk menampilkan dan menyembunyikan elemen saat mencari.
• Cari apa saja . Plugin ini tidak dibatasi untuk digunakan pada tabel, kumpulan elemen apa pun yang memiliki 'baris' dengan 'kolom' di dalamnya dapat digunakan.

Demo

Klik di sini untuk melihat demo cara kerja plugin ini (Dihosting di Bootsnipp)

Memulai

Penggunaan dasar

Setelah mengunduh plugin ini, sertakan dalam file HTML Anda setelah memuat jQuery:

 < script src =" jquery.js " > </ script >
< script src =" jquery.searchable.js " > </ script >

Catatan : Jika Anda ingin mendukung browser lama seperti <IE9, Anda dapat menggunakan jquery.searchable-ie.js alih-alih jquery.searchable.js . Versi ini menyertakan polyfill untuk fungsi Array.prototype.reduce dan oleh karena itu ukurannya sedikit lebih besar (beberapa ratus byte).

Setelah itu, Anda cukup menginisialisasi plugin pada elemen yang diinginkan. Contoh ini menggunakan tabel dengan id 'tabel'. Secara default, plugin menggunakan input dengan id 'pencarian' (baca tentang cara mengubahnya di bagian Konfigurasi di bawah):

 $ ( '#table' ) . searchable ( ) ;

Konfigurasi

Plugin ini menyediakan opsi konfigurasi berikut:

Pilihan	Nilai bawaan	Keterangan
pemilih	'tbody tr'	Mendefinisikan pemilih jQuery utama dalam elemen tempat plugin diinisialisasi. Ini memilih elemen kontainer untuk ditampilkan atau disembunyikan, seperti tr dalam tabel, atau div.your-special-class dalam elemen yang dapat dicari.
pemilih anak	'td'	Mendefinisikan pemilih anak dalam 'pemilih' yang ditentukan di atas. Ini memilih elemen yang dapat dicari dalam elemen 'pemilih', seperti td atau .searchable .
bidang pencarian	'#search'	Elemen masukan yang digunakan untuk filter masukan pencarian
bergaris	false	Mendefinisikan apakah elemen tersebut bergaris dan harus diberi garis ulang saat melakukan pencarian (baik true atau false )
baris aneh	{ }	Mendefinisikan objek CSS untuk diterapkan pada baris ganjil (bila striped disetel ke true ).
baris genap	{ }	Mendefinisikan objek CSS untuk diterapkan pada baris genap (bila striped disetel ke true ).
bersembunyi	function	Memungkinkan Anda menentukan fungsi persembunyian khusus. Fungsi ini menerima satu parameter, yaitu elemen (baris) yang disembunyikan. Secara default, ini akan menggunakan elem.hide() untuk menyembunyikan baris.
menunjukkan	function	Memungkinkan Anda menentukan fungsi tampilan kustom. Fungsi ini menerima satu parameter, yaitu elemen (baris) yang disembunyikan. Secara default, ini akan menggunakan elem.show() untuk menampilkan baris.
tipe pencarian	'default'	Menentukan pencocokan yang akan digunakan saat mencari. Nilai yang diperbolehkan adalah 'fuzzy' , 'strict' dan 'default' .
diSearchActive	false	Memungkinkan Anda menentukan fungsi yang akan dipanggil saat pencarian aktif. Fungsi ini akan dipanggil setiap kali pengguna mengetikkan input pencarian dan input pencarian tidak kosong. Elemen yang dapat dicari dan istilah pencarian akan diteruskan ke fungsi.
diSearchEmpty	false	Memungkinkan Anda menentukan fungsi yang akan dipanggil ketika input pencarian kosong. Fungsi ini akan dipanggil satu kali ketika input pencarian kosong atau dihapus. Elemen yang dapat dicari akan diteruskan ke fungsi.
diSearchFocus	false	Memungkinkan Anda menentukan fungsi yang akan dipanggil ketika input pencarian terfokus. Konteks fungsi this akan menjadi elemen input pencarian.
diSearchBlur	false	Memungkinkan Anda menentukan fungsi yang akan dipanggil ketika input pencarian kabur. Konteks fungsi this akan menjadi elemen input pencarian.
hapusOnLoad	false	Menentukan apakah input pencarian harus dihapus pada pemuatan halaman ( true atau false ).

Contoh penggunaan

Contoh ini menggunakan konfigurasi yang ditunjukkan di atas untuk menyesuaikan plugin:

 $ ( '#element' ) . searchable ( {
    selector      : '.row' ,
    childSelector : '.column' ,
    searchField   : '#mySearchInput' ,
    striped       : true ,
    oddRow        : { 'background-color' : '#f5f5f5' } ,
    evenRow       : { 'background-color' : '#fff' } ,
    hide          : function ( elem ) {
        elem . fadeOut ( 50 ) ;
    } ,
    show          : function ( elem ) {
        elem . fadeIn ( 50 ) ;
    } ,
    searchType    : 'fuzzy' ,
    onSearchActive : function ( elem , term ) {
        elem . show ( ) ;
    } ,
    onSearchEmpty : function ( elem ) {
        elem . hide ( ) ;
    } ,
    onSearchFocus : function ( ) {
        $ ( '#feedback' ) . show ( ) . text ( 'Type to search.' ) ;
    } ,
    onSearchBlur : function ( ) {
        $ ( '#feedback' ) . hide ( ) ;
    } ,
    clearOnLoad : true
} ) ; 

log perubahan

Versi 1.0.0:

• Rilis awal.

Versi 1.1.0:

• Menambahkan beberapa peristiwa yang memungkinkan Anda memanggil fungsi khusus selama siklus hidup pencarian: onSearchActive, onSearchEmpty, onSearchFocus, onSearchBlur (lihat konfigurasi untuk informasi lebih lanjut).
• Menambahkan pengaturan clearOnLoad yang memungkinkan Anda menghapus input pencarian saat memuat/menyegarkan halaman.

Berkontribusi & Masalah

Jangan ragu untuk mengirimkan masalah atau permintaan penarikan apa pun, itu lebih diterima. Saat mengirimkan masalah, harap tentukan nomor versi dan jelaskan masalah tersebut secara detail sehingga dapat diselesaikan sesegera mungkin!

Lisensi

Hak Cipta (c) 2014 - Stidges - Berlisensi di bawah lisensi MIT.