Cara Memfilter Hasil Pencarian Saat Mengetik Dengan React

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 metode JavaScript map dan filter array, hasil akhirnya adalah kotak pencarian yang responsif dan fungsional.

---

---

layar hitam laptop toshiba dengan kursor

VIDEO MAKEUSEOF HARI INI

Membuat Bilah Pencarian

Pencarian akan mengambil input dari pengguna dan memicu fungsi penyaringan. Kamu bisa gunakan perpustakaan seperti Formik untuk membuat formulir di React , tetapi Anda juga dapat membuat bilah pencarian dari awal.

Jika Anda tidak memiliki proyek React dan ingin mengikutinya, buatlah proyek tersebut menggunakan perintah create-react-app.

npx create-react-app search-bar 

Dalam aplikasi.js file, tambahkan elemen formulir, termasuk tag input:

export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
} 

Anda harus menggunakan gunakanNegara Kait reaksi dan dalam perubahan acara untuk mengontrol input. Jadi, impor useState dan ubah input untuk menggunakan nilai status:

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  } 

Setiap kali pengguna mengetik sesuatu di dalam elemen input, menanganiUbah memperbarui negara.

---

---

Memfilter Data pada Perubahan Input

Bilah pencarian harus memicu pencarian menggunakan kueri yang disediakan 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 [state, setstate] = useState({ 
  query: '', 
  list: [] 
}) 

Menggabungkan nilai status seperti ini, alih-alih membuat satu untuk setiap nilai, memotong jumlah render, meningkatkan kinerja.

Data yang Anda filter dapat berupa apa saja yang Anda inginkan untuk melakukan pencarian. Misalnya, Anda dapat membuat daftar contoh posting blog seperti ini:

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ] 

Anda juga bisa ambil 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 results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
} 

Fungsi mengembalikan posting tanpa mencari melalui mereka jika kueri kosong. Jika pengguna telah mengetik kueri, itu akan memeriksa apakah judul posting menyertakan teks kueri. Mengubah 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.

export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
} 

Di dalam tag ul, komponen memeriksa apakah kueri kosong. Jika ya, ini akan menampilkan string kosong karena itu berarti pengguna belum mencari apa pun. Jika Anda ingin menelusuri daftar item yang sudah Anda tampilkan, hapus centang ini.

pindahkan folder pengguna ke drive lain

Jika kueri tidak kosong, metode peta mengulangi hasil pencarian dan mencantumkan judul posting.

Anda juga dapat menambahkan tanda centang yang menampilkan pesan bermanfaat jika pencarian tidak memberikan hasil.

<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul> 

Menambahkan pesan ini meningkatkan pengalaman pengguna karena pengguna tidak dibiarkan melihat ruang kosong.

Menangani Lebih Dari Sekali Parameter Pencarian

Anda dapat menggunakan React state dan hook, bersama dengan event JavaScript, untuk membuat elemen pencarian kustom yang memfilter array data.

Fungsi filter hanya memeriksa apakah kueri cocok dengan satu properti—judul—di objek di dalam larik. Anda dapat meningkatkan fungsionalitas pencarian dengan menggunakan operator logika OR untuk mencocokkan kueri dengan properti lain dalam objek.