holmes

Pencarian cepat dan mudah di dalam halaman.

Holmes memfilter daftar elemen berdasarkan nilai input hanya dalam ~2KB.

Instalasi

Anda dapat menginstal Holmes dengan npm atau bower dengan nama paket holmes.js . Untuk npm tampilannya seperti ini:

$ yarn add holmes.js # or via npm

Setelah itu Anda dapat menambahkannya di halaman Anda dengan webpack, rollup, browserify atau memuat modul dalam tag skrip yang berbeda.

Anda harus memastikan bahwa Anda memiliki aturan css untuk kelas .hidden yang menyembunyikan elemen sesuka Anda. Salah satu opsinya adalah memiliki ini:

. hidden {
  display : none;
}

tapi ini bisa berupa css apa pun yang Anda inginkan.

Penggunaan

demo

Kapan saya harus menggunakannya?

Anda harus menggunakan Holmes kapan

• Anda memiliki jumlah item yang terbatas
• Anda tidak perlu toleransi kesalahan ketik
• Anda hanya ingin menambahkan perpustakaan yang sangat kecil
• semua item sudah terlihat di halaman

Jika Anda memiliki ekspektasi yang lebih rumit, saya sarankan menggunakan layanan seperti Algolia.

Pengungkapan yang adil: Saat ini saya bekerja di Algolia, apakah menarik? Bergabunglah dengan kami!

Contoh sederhana

 holmes ( {
  input : '.search input' , // default: input[type=search]
  find : '.results div' // querySelectorAll that matches each of the results individually
} ) 

Pilihan

dokumentasi lengkap

input

bawaan : input[type=search]

querySelector untuk masukan

contoh : input , .search input

find diperlukan

querySelectorAll untuk elemen yang akan dicari

contoh : blockquote p , .result , .results div

class

class.hidden

bawaan : hidden

Kelas untuk ditambahkan ketika a .find tidak berisi permintaan pencarian.

contoh : hidden , dn , none

class.visible

bawaan : false

Kelas untuk ditambahkan ke item yang terlihat jika berisi permintaan pencarian.

contoh : visible , vis , nohidden

placeholder

bawaan : false

html untuk ditampilkan ketika tidak ada hasil.

contoh : <p> No results </p> , Didn't find anything.

dynamic

bawaan : false

Aktifkan opsi ini jika Anda ingin Holmes menanyakan nilai .find pada setiap input.

contoh : true , false

instant ️ TIDAK DIGUNAKAN lagi

bawaan : false

Opsi ini tidak digunakan lagi. Untuk menggunakan Holmes di lingkungan async, inisialisasi dengan:

 holmes ( options ) . start ( ) ;
// or
const h = new holmes ( options ) ;
h . start ( ) ;

Dengan cara ini, ini akan segera dimulai, seperti yang biasa dilakukan dengan instant: true . Maaf atas ketidaknyamanan ini.

Secara default, Holmes akan menunggu acara DOMContentLoaded untuk mulai mencari. Jika Anda memuat elemen dengan AJAX misalnya, acara ini datang terlalu dini. Dalam hal ini Anda dapat mengaktifkan instant , dan memulai Holmes ketika konten Anda sudah siap.

contoh : true , false

minCharacters

bawaan : 0

Jumlah minimum karakter harus diketik sebelum Holmes mulai memfilter.

contoh : 2 , 5

mark

bawaan : false

Untuk mulai menampilkan hasilnya dalam tag <mark> di dalam .find , Anda harus mengaktifkan ini. Untuk mengubah warna tampilan yang match ini, Anda harus memberi gaya pada mark warna latar belakang.

❗ ini akan memecah pendengar acara pada konten yang disarangkan

❗ ini tidak akan berfungsi jika karakter setelah pertandingan adalah > literal.

Jika Anda benar-benar harus menggunakan karakter ini, Anda dapat mengganti semua kemunculan > dengan >

contoh : true , false

hiddenAttr

bawaan : true

Menambahkan hidden="true" ke elemen tersembunyi. Tautan menarik menjelaskan penggunaannya.

shouldShow

penilaian kecocokan default adalah kecocokan sebagian dari nilai input.

 function ( htmlText , search ) {
  return htmlText . indexOf ( search ) !== - 1 ;
}

Fungsi pencocokan khusus untuk dipanggil dengan argumen pertama teks elemen, dan sebagai argumen kedua teks masukan saat ini. Ini akan mengembalikan nilai true jika Anda ingin elemen ditampilkan, dan false jika perlu disembunyikan.

 var customMatching = function ( htmlText , search ) {
  return search . split ( / s+ / ) . every ( function ( v , i ) {
    if ( htmlText . indexOf ( v ) === - 1 ) {
      return false ;
    }
    return true ;
  } ) ;
}
holmes ( {
  shouldShow : customMatching
} )

onHidden

Panggilan balik ketika suatu item disembunyikan.

 function ( el ) {
  console . log ( 'hide' , el ) ;
}

onVisible

Panggilan balik ketika suatu item terlihat lagi.

 function ( el ) {
  console . log ( 'show' , el ) ;
}

onEmpty

Panggilan balik ketika tidak ada item yang ditemukan.

 function ( placeholder ) {
  console . log ( 'nothing found' , placeholder ) ;
}

onFound

Panggilan balik ketika barang ditemukan setelah kosong.

 function ( placeholder ) {
  console . log ( 'something found' , placeholder ) ;
}

onInput

Panggilan balik untuk setiap masukan.

 function ( input ) {
  console . log ( 'current input' , input ) ;
} 

Metode dan anggota

Untuk semua metode, Anda harus menginisialisasi instance baru Holmes seperti ini:

 var h = new holmes ( options ) ;

Kemudian Anda dapat menggunakan cara berikut:

.clear()

Anda dapat menghapus masukan Holmes secara terprogram, dengan menggunakan:

 h . clear ( ) ;

.count()

Anda dapat menerima informasi tentang elemen apa saja yang terlihat, tersembunyi, dan total kapan saja:

 h . count ( ) ; // {all: 41, hidden: 34, visible: 7}

.start()

Mulai pendengar genap untuk opsi yang ditentukan. Holmes selalu menjalankan .start() pada inisialisasi.

 h . start ( ) ;

.stop()

Menghentikan pendengar acara yang sedang berjalan. Menyelesaikan Janji ketika ini telah selesai.

 h . stop ( ) ;
h . start ( ) ; // could accidentally start too soon

h . stop ( ) . then ( h . start ) ; // might take a small time

.hidden

Ada juga anggota .hidden yang memberikan hitungan tanpa pemanggilan fungsi:

 console . log ( h . hidden ) ; // 34

.elements

NodeList dari semua elemen yang dipertimbangkan Holmes. Ada juga .elementsLength untuk jumlah elemen dan .elementsArray dengan array elemen.

.input

Masukan yang dilihat Holmes. Ada juga string pencarian terakhir sebagai .searchString

.placeholder

Placeholder saat ini (Node DOM).

.running

Apakah instance ini berjalan atau tidak.

.options

Menunjukkan opsi yang dipilih untuk contoh Holmes ini. Anda juga dapat mengatur opsi seperti ini setelah inisialisasi.

 console . log ( h . options ) ; // specified options

catatan: opsi pengaturan setelah dijalankan mungkin memerlukan h.stop().then(h.start)

Memamerkan

Apa	WHO	gambar
bullg.it	@haroenv
keluarga.scss	@lukyvj
wikeo.be	@bistory
aplikasi makan siang.be	@AndreasBackx

Saya ingin mengetahui bagaimana orang-orang menggunakan proyek saya, beri tahu saya jika Anda ingin ditampilkan!

Pertanyaan?

Kompatibel hingga IE11. Untuk mendukung browser lama, Anda perlu melakukan polyfill classList , addEventListener dan acara input misalnya remy/polyfills. Saya sendiri belum mencobanya, jadi beri tahu saya apa yang Anda gunakan jika Anda mendukung browser lama!

Untuk IE11 Anda perlu melakukan polyfill Object.assign dan String.includes , Anda dapat melakukannya seperti yang dijelaskan di #90

Beri tahu saya di twitter: @haroenv, atau dalam sebuah terbitan.

Berkontribusi

Kontribusi selalu diterima! Berikut adalah beberapa pedoman longgar:

• menggunakan feature branches
• jangan membuatnya lebih lambat
• jelaskan mengapa Anda menginginkan fitur tersebut
• npm run doc untuk membuat ulang dokumentasi

Membangun UMD dilakukan melalui rollup ( npm run build ).

Tapi saya tidak menggigit, jika Anda memiliki pertanyaan atau rasa tidak aman, hubungi saya misalnya di gitter.

Lisensi

Apache 2.0