Bilah pencarian adalah cara yang bagus untuk membantu pengguna menemukan apa yang mereka butuhkan di situs web Anda. Mereka juga bagus untuk analitik jika Anda melacak apa yang dicari pengunjung Anda.
Anda dapat menggunakan React untuk membuat bilah pencarian yang memfilter dan menampilkan data saat pengguna mengetik. Dengan React hooks dan peta JavaScript dan metode filter array, hasil akhirnya adalah kotak pencarian fungsional yang responsif.
Membuat Bilah Pencarian
Pencarian akan mengambil input dari pengguna dan memicu fungsi pemfilteran. Kamu bisa gunakan pustaka seperti Formik untuk membuat formulir di React, tetapi Anda juga dapat membuat bilah penelusuran dari awal.
Jika Anda tidak memiliki proyek React dan ingin mengikutinya, buat proyek menggunakan perintah create-react-app.
npx membuat-reaksi-aplikasi mencari-batang
Dalam Aplikasi.js file, tambahkan elemen form, termasuk tag input:
eksporbawaanfungsiAplikasi() {
kembali (
<div>
<membentuk>
<jenis masukan="mencari"/>
</form>
</div>
)
}
Anda harus menggunakan
useStateBereaksi kait dan dalam perubahan acara untuk mengontrol input. Jadi, impor useState dan ubah input untuk menggunakan nilai status:impor { status penggunaan } dari "Reaksi"
eksporbawaanfungsiAplikasi() {
const [permintaan, setquery] = useState('')
const handleChange = (e) => {
setquery(e.target.nilai)
}
kembali (
<div>
<membentuk>
<jenis masukan="mencari" nilai={query} onChange={handleChange}/>
</form>
</div>
)
}
Setiap kali pengguna mengetikkan sesuatu di dalam elemen input, handleChange memperbarui negara bagian.
Memfilter Data pada Perubahan Input
Bilah pencarian harus memicu pencarian menggunakan kueri yang diberikan pengguna. Ini berarti Anda harus memfilter data di dalam fungsi handleChange. Anda juga harus melacak data yang difilter di negara bagian.
Pertama, ubah status untuk memasukkan data:
const [status, setstat] = useState({
pertanyaan: '',
daftar: []
})
Membundel nilai status seperti ini, alih-alih membuat satu untuk setiap nilai, memangkas jumlah render, sehingga meningkatkan kinerja.
Data yang Anda filter dapat berupa apa saja yang ingin Anda cari. Misalnya, Anda dapat membuat daftar contoh posting blog seperti ini:
const postingan = [
{
url: '',
tag: ['reaksi', 'blog'],
judul: 'Cara membuat sebuah reaksi mencari batang',
},
{
url:'',
tag: ['simpul','cepat'],
judul: 'Cara mengejek data api di Node.js',
},
// lebih banyak data di sini
]
Anda juga bisa mengambil data menggunakan API dari CDN atau database.
Selanjutnya, ubah fungsi handleChange() untuk memfilter data setiap kali pengguna mengetik di dalam input.
const handleChange = (e) => {
const hasil = posting.filter (posting => {
jika (e.target.nilai "") kembali posting
kembalipos.judul.toLowerCase().termasuk(e.target.nilai.toLowerCase())
})
keadaan setel({
pertanyaan: e.target.nilai,
daftar: hasil
})
}
Fungsi mengembalikan posting tanpa mencarinya jika kueri kosong. Jika pengguna telah mengetik kueri, ia akan memeriksa apakah judul kiriman menyertakan teks kueri. Mengonversi judul posting dan kueri menjadi huruf kecil memastikan perbandingan tidak peka huruf besar-kecil.
Setelah metode filter mengembalikan hasil, fungsi handleChange memperbarui status dengan teks kueri dan data yang difilter.
Menampilkan Hasil Pencarian
Menampilkan hasil pencarian melibatkan perulangan array daftar menggunakan peta metode dan menampilkan data untuk setiap item.
eksporbawaanfungsiAplikasi() {
// status dan fungsi handleChange()
kembali (
<div>
<membentuk>
<masukan onChange={handleChange} value={state.query} type="mencari"/>
</form>
<ul>
{(status.query ''? "": state.list.map (posting => {
kembali <li key={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
Di dalam tag ul, komponen memeriksa apakah kueri kosong. Jika ya, ini menampilkan string kosong karena berarti pengguna belum mencari apa pun. Jika Anda ingin menelusuri daftar item yang sudah Anda tampilkan, hilangkan centang ini.
Jika kueri tidak kosong, metode peta mengulangi hasil pencarian dan mencantumkan judul posting.
Anda juga dapat menambahkan centang yang menampilkan pesan bermanfaat jika pencarian tidak menghasilkan apa-apa.
<ul>
{(status.query ''? "Tidak ada postingan yang cocok dengan kueri": !status.daftar.panjang? "Kueri Anda tidak memberikan hasil apa pun": state.list.map (posting => {
kembali <li key={post.title}>{post.title}</li>
}))}
</ul>
Menambahkan pesan ini meningkatkan pengalaman pengguna karena pengguna tidak dibiarkan melihat ruang kosong.
Menangani Parameter Pencarian Lebih dari Sekali
Anda dapat menggunakan React state dan hooks, bersama dengan event JavaScript, untuk membuat elemen pencarian khusus yang memfilter larik data.
Fungsi filter hanya memeriksa apakah kueri cocok dengan satu properti—judul—dalam objek di dalam larik. Anda dapat meningkatkan fungsionalitas pencarian dengan menggunakan operator logika ATAU untuk mencocokkan kueri dengan properti lain di objek.
