Cara Menapis Hasil Carian Semasa Menaip Dengan React

Bar carian ialah cara yang bagus untuk membantu pengguna mencari perkara yang mereka perlukan di tapak web anda. Ia juga bagus untuk analitis jika anda menjejaki perkara yang dicari oleh pelawat anda.

Anda boleh menggunakan React untuk membina bar carian yang menapis dan memaparkan data semasa pengguna menaip. Dengan cangkuk React dan kaedah tatasusunan peta dan penapis JavaScript, hasil akhirnya ialah kotak carian yang responsif dan berfungsi.

---

---

MAKEUSEOF VIDEO OF THE DAY

Mencipta Bar Carian

Carian akan mengambil input daripada pengguna dan mencetuskan fungsi penapisan. Awak boleh gunakan perpustakaan seperti Formik untuk mencipta borang dalam React , tetapi anda juga boleh membuat bar carian dari awal.

Jika anda tidak mempunyai projek React dan ingin mengikutinya, buat satu menggunakan arahan create-react-app.

npx create-react-app search-bar 

Di dalam App.js fail, tambah elemen borang, termasuk teg input:

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

Anda harus menggunakan useState React hook dan juga onChange acara untuk mengawal input. Jadi, import useState dan ubah suai input untuk menggunakan nilai keadaan:

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 menaip sesuatu di dalam elemen input, mengendalikanTukar mengemas kini negeri.

---

---

windows 10 tidak bersambung dengan internet

Menapis Data pada Perubahan Input

Bar carian harus mencetuskan carian menggunakan pertanyaan yang disediakan oleh pengguna. Ini bermakna anda harus menapis data di dalam fungsi handleChange. Anda juga harus menjejaki data yang ditapis di negeri ini.

Pertama, ubah suai keadaan untuk memasukkan data:

---

---

const [state, setstate] = useState({ 
  query: '', 
  list: [] 
}) 

Menggabungkan nilai keadaan seperti ini, bukannya mencipta satu untuk setiap nilai, mengurangkan bilangan pemaparan, meningkatkan prestasi.

Data yang anda tapis boleh menjadi apa sahaja yang anda mahu lakukan carian. Sebagai contoh, anda boleh membuat senarai contoh catatan 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 boleh ambil data menggunakan API daripada CDN atau pangkalan data.

Seterusnya, ubah suai fungsi handleChange() untuk menapis data apabila pengguna menaip 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 siaran tanpa mencari melaluinya jika pertanyaan kosong. Jika pengguna telah menaip pertanyaan, ia menyemak sama ada tajuk siaran termasuk teks pertanyaan. Menukar tajuk siaran dan pertanyaan kepada huruf kecil memastikan perbandingan tidak sensitif huruf besar.

Setelah kaedah penapis mengembalikan hasil, fungsi handleChange mengemas kini keadaan dengan teks pertanyaan dan data yang ditapis.

Memaparkan Hasil Carian

Memaparkan hasil carian melibatkan gelung pada tatasusunan senarai menggunakan peta kaedah dan memaparkan data bagi 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 teg ul, komponen menyemak sama ada pertanyaan itu kosong. Jika ya, ia memaparkan rentetan kosong kerana ia bermakna pengguna tidak mencari apa-apa. Jika anda ingin mencari melalui senarai item yang anda sudah paparkan, alih keluar semakan ini.

Jika pertanyaan tidak kosong, kaedah peta akan berulang pada hasil carian dan menyenaraikan tajuk siaran.

Anda juga boleh menambah semakan yang memaparkan mesej berguna jika carian tidak mengembalikan 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> 

Menambah mesej ini meningkatkan pengalaman pengguna kerana pengguna tidak dibiarkan melihat ruang kosong.

tetikus berhenti berfungsi secara rawak windows 10

Mengendalikan Lebih Daripada Sekali Parameter Carian

Anda boleh menggunakan keadaan React dan cangkuk, bersama-sama dengan acara JavaScript, untuk mencipta elemen carian tersuai yang menapis tatasusunan data.

Fungsi penapis hanya menyemak sama ada pertanyaan sepadan dengan satu sifat—tajuk—dalam objek dalam tatasusunan. Anda boleh meningkatkan fungsi carian dengan menggunakan operator OR logik untuk memadankan pertanyaan dengan sifat lain dalam objek.