Menggunakan MiniSearch dalam React: Carian Terperinci dan Penapisan Dipermudahkan

Bab Satu
Apakah MiniSearch dan Bagaimana Ia Meningkatkan Penapisan JavaScript?

MiniSearch ialah perpustakaan JavaScript yang ringan untuk carian teks penuh dalam set data kecil hingga sederhana. Ia mengindeks data dan membenarkan keupayaan carian lanjutan seperti padanan kabur, carian awalan, kedudukan mengikut perkaitan dan pemberatan medan.

Dan dengan padanan kabur, padanan kabur bermaksud mencari perkataan atau bahagian perkataan walaupun ia tidak ditaip dengan betul. Contohnya, jika anda menaip "wlf" dan bukannya "serigala", carian kabur masih akan menemui hasil yang termasuk "serigala".

Dan dengan carian awalan, carian awalan mencari perkataan atau bahagian pada permulaan sesuatu. Jadi, jika anda mencari "kereta", carian awalan juga akan menemui "troli" atau "berkarbonat."

Ciri yang diberikan kepada kami oleh miniSearch ini membantu kami mencari perkara yang kami cari walaupun ia tidak ditaip dengan sempurna. Oleh itu, menjadikan hasil carian lebih tepat dan membantu.

Dan Mengapa Kita Memerlukannya?

Kelebihan pertama yang diberikannya kepada kami ialah Ciri Carian Terperinci:
Penapisan tradisional biasanya sepadan dengan nilai tepat atau corak asas. MiniSearch menyediakan padanan teks yang lebih canggih. Ciri carian lanjutan ini boleh meneka kesilapan anda, seperti jika anda menaip "bak" dan bukannya "kembali", MiniSearch tahu apa yang anda maksudkan.

Satu lagi kelebihan yang dimilikinya berbanding penapisan/ carian tradisional ialah Kedudukan Relevan:
MiniSearch menyusun kedudukan hasil berdasarkan perkaitan, mempertingkatkan pengalaman pengguna dalam aplikasi berat carian. Ini memastikan hasil yang paling berkaitan muncul dahulu. Contohnya, jika anda mencari "JavaScript", sistem mengutamakan dokumen atau item yang menyebut "JavaScript" dengan jelas atau kerap, meningkatkan pengalaman carian keseluruhan.

Sekarang kita tidak mempunyai masalah itu, mari buat aplikasi React.js asas dan lihat cara kami menggunakan MiniSearch di sisi pelanggan.

Bab Dua
Cara Menyediakan Apl React dengan MiniSearch:

Ok, mari kita sediakan projek kita. Dan untuk kami menyediakan projek itu, saya akan menggunakan vite yang sentiasa boleh dipercayai. Editor teks atau IDE yang akan saya gunakan ialah orang jahat, editor kod Visual Studio.

Saya akan menyediakan Vite dengan gesaan ini dalam terminal. Dan saya mesti katakan, saya telah pun mencipta folder ini sebelum ini:

Untuk masuk ke dalam folder visual_testing:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Untuk masuk ke dalam folder bangunan-dalam-awam-slack:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Untuk masuk ke dalam folder carian mini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

Untuk masuk ke dalam folder bahagian hadapan:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

Kemudian dalam folder bahagian hadapan, saya akan memasang Vite, kerana di situlah kita mahu ia berada, dalam folder bahagian hadapan kita.

Saya akan memasangnya dengan baris kod ini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Kemudian ia memberi saya pilihan untuk dipilih, saya akan menggunakan Javascript dan React di sini. Bertindak balas sebagai rangka kerja dan Javascript sebagai varian.

Setelah Selesai. Saya akan disambut oleh mereka ini:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Kemudian saya akan memasang pakej minisearch dan pakej react-router-dom. Walaupun saya tidak memerlukan pakej penghala tindak balas dalam tutorial ini:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Akan juga memasang scss dengan menjalankan kod ini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

Sekarang, ini tidak akan mempunyai bahagian belakang. Sebaliknya, saya akan meletakkan data secara luaran, di suatu tempat. Lebih lanjut mengenainya kemudian.

Jadi, jika kita sekarang memulakan aplikasi kecil kita dengan menjalankan npm run dev di terminal, kita akan mendapat respons seperti ini di terminal:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

Kami perlu Ikut pautan (klik ctrl) pada ini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Jika kita ctrl klik pada:

Done. Now run:

 npm install
 npm run dev

Kami akan disambut oleh halaman yang kelihatan seperti ini dalam penyemak imbas:

Bab Tiga
Membersihkan App.jsx":

App.jsx akan kelihatan seperti ini pada mulanya:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

Dan inilah yang bertanggungjawab untuk logo react dan logo vite yang kita lihat dalam gambar di atas. Walau bagaimanapun, kami tidak mahu menggunakan kandungan App.jsx sekarang, jadi kami perlu membersihkannya. Selepas membersihkannya, kandungannya sepatutnya kelihatan seperti ini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

Ini akan meninggalkan kami dengan skrin kosong dalam penyemak imbas kami.

Bab Empat
Menyediakan Projek: Mencipta Pangkalan Data Mock:

Biasanya, saya sepatutnya mendapatkan data daripada pangkalan data, superbase, firebase atau apa sahaja. Ataupun API di suatu tempat. Saya akan mendapatkan data saya daripada fail json. Saya akan memanggilnya, db.json. Fail akan hidup dalam folder yang dipanggil data, yang sepatutnya berada di akar aplikasi kami. Kandungan fail db akan kelihatan seperti ini:

 VITE v5.4.11  ready in 332 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

Ya! homeboy anda adalah seorang gamer.???. Dan hanya untuk memberitahu anda bahawa saya sangat ingin memainkan tajuk ini.
Sekarang, Izinkan saya menjalankan fail dengan cepat.

Fail mengandungi objek JSON dengan tatasusunan entri blog. Setiap objek mewakili permainan video dan mempunyai medan berikut:

tajuk: Nama permainan video.

teks: Penerangan ringkas tentang permainan.

pengarang: Orang yang menulis entri blog.

id: Pengecam unik untuk setiap catatan blog. cth: "1","2","3"

Bab Lima
Menyediakan Mock Backend dengan Pelayan JSON:

Untuk menyediakan pangkalan data dan berjalan, kami perlu pergi ke terminal kami. Kita boleh membuka port lain dalam terminal, dan menjalankan arahan ini dalam terminal:

http://localhost:5173/

Maklum balas yang kami akan dapat ialah ini:

http://localhost:5173/

Ini bermakna pelayan/ pangkalan data palsu kami sedia untuk bertindak.

Bab Enam
Membina Bahagian Depan: Mencipta Komponen BlogList:

Baiklah! Sekarang saya akan pergi ke dalam folder src dan di sana, buat folder komponen. Di dalam folder komponen,  Saya akan mencipta folder lain, panggilnya blog. Di dalam folder blog, saya akan mencipta satu lagi folder bernama, blog-list. Dan di dalam folder senarai blog ini, saya akan mencipta dua fail. BlogList.jsx dan BlogList.module.scss. Tidak akan menyentuh yang terakhir di sini.

Kemudian tetapkan komponen BlogList seperti ini:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Bab Tujuh
Penghalaan dalam React: Rendering BlogList dalam App.jsx:

Sekarang kami telah membina struktur asas BlogList kami, kami perlu menyambungkannya ke App.jsx supaya ia boleh dipaparkan pada skrin/pelayar. Untuk berbuat demikian, mari kita selami fail App.jsx dan tulis kod ini:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Tidak menyentuh Reka Letak, kerana ia tidak berguna di sini.

Kemudian dalam main.jsx, kami akan menyediakan penghala Pelayar di sana seperti ini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

Jadi dengan semua ini disediakan, apa sahaja yang berlaku dalam App.jsx kami akan kelihatan dalam penyemak imbas/skrin kami sekarang.

Bab Lapan
Kembali ke BlogList.jsx:
Menyediakan Blog dan Memuatkan Negeri dalam BlogList.jsx

Di sini, saya akan mencipta beberapa negeri untuk digunakan dan juga akan mengambil data blog daripada pelayan tempatan kami yang berjalan pada localhost:8000.

Negeri pertama yang saya akan buat adalah untuk blog. Ia akan bermula sebagai tatasusunan kosong apabila Apl dipaparkan dan kemudiannya akan dikemas kini apabila kami menerima data blog kami daripada pelayan olok-olok.

Kemudian keadaan kedua yang saya akan buat, adalah untuk memuatkan. Ia akan menjejaki sama ada data masih dimuatkan. Ia bermula sebagai palsu dan boleh ditetapkan kepada benar semasa mengambil data.

Soooooooooooo:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

Bab Kesembilan
Memaparkan data yang kami ambil:
Membina Jsx:

Pertama sekali, saya akan membina komponen jsx. Dan untuk itu, saya akan menulis ini di bawah di bahagian kembali:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Bab Sepuluh
Memaparkan data yang kami ambil:
Inilah penggunaanEffect:

Ini tidak banyak membantu. Walaupun kami mendapat data dalam konsol kami, data itu tidak dipaparkan pada skrin. Dan untuk ia dipaparkan pada skrin, kami memerlukan bantuan salah seorang lelaki jahat bertindak balas, useEffect.

Apakah useEffect?
Menurut NetNinja, "cangkuk ini, menjalankan fungsi pada setiap pemaparan komponen. Ingat, komponen membuat pada mulanya apabila ia mula-mula dimuatkan, dan ia juga berlaku apabila keadaan berubah. Ia memaparkan semula DOM, supaya ia boleh mengemas kini keadaan itu (keadaan yang diubah) dalam penyemak imbas".

Soooooooooooo
Fungsi yang kami tulis sebelum ini untuk fetchBlogs, kami akan meletakkannya dalam useEffect:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Nampak seperti filem Inception? Bertenang, saya akan terangkan sebentar lagi. Bukan filem Omen, But Oh! Lelaki! ini ialah Christopher Nolan dari Mern {M.E.R.N} di sini.???

Kemudian dalam Jsx, kami akan kod ini di sana:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Bab Dua Belas
Bagaimana rupanya dengan MiniSearch:

Ok, kini kami boleh memaparkan blog pada skrin kami. Sekarang mari kita gunakan MiniSearch. Keseluruhan kod akan kelihatan seperti ini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

Kod ini mencipta contoh baharu MiniSearch untuk mendayakan carian teks penuh. Inilah yang dilakukannya:

medan: Menentukan medan (tajuk, pengarang, teks) dalam data yang akan diindeks untuk carian.

storeFields: Mentakrifkan medan yang akan disertakan dalam hasil carian. Medan ini disimpan bersama data yang diindeks untuk mendapatkan semula dengan mudah.

Kemudian ini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

Kod ini memberikan kami jumlah dokumen yang telah diindeks oleh miniSearch selepas halaman dipaparkan.

Sekarang, mari pergi lebih jauh. Halaman dipaparkan, dan apabila ia dipaparkan, keadaan blog kosong pada mulanya. Kami boleh melihat ihsan ini dalam kod kami:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Selepas itu, kami mendapatkan data kami menggunakan fungsi fetchBlogs. Terdapat data di sana secara nyata, kami tahu ada data dengan mencari kod ini:

Done. Now run:

 npm install
 npm run dev

Kini kod ini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

Ini digunakan untuk mengalih keluar semua item yang diindeks sebelum ini. Ini berguna jika anda perlu mengindeks semula data baharu atau mengosongkan indeks carian semasa. Kami mahu mempunyai batu tulis yang bersih supaya kami menggunakannya.

Kemudian ini:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

Kaedah miniSearch.addAll(data) menambahkan semua item dalam tatasusunan data pada indeks MiniSearch.

Jadi selepas mendapat data, kami mengemas kini blog, dengan menjalankan kod ini:

 VITE v5.4.11  ready in 332 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

Sebaik sahaja kami mengemas kini keadaan blog, susunan blog kosong akan diisi dengan data kami.

Dalam proses itu, kami membersihkan instance miniSearch kami untuk memberi ruang kepada data baharu untuk diindeks dengan kod ini:

http://localhost:5173/

Dan kami menambah data yang diterima padanya dengan menjalankan kod ini:

http://localhost:5173/

Dengan semua ini yang berlaku, contoh miniSearch kami harus dimuatkan dengan data, ya memang begitu. Jika anda melihat baris kod ini:

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
           {" "}
      <div>
               {" "}
        <a href="https://vite.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo" />     
           {" "}
        </a>
                <a href="https://react.dev" target="_blank">
                   {" "}
          <img src={reactLogo} className="logo react" alt="React logo" />     
           {" "}
        </a>     {" "}
      </div>
            <h1>Vite + React</h1>      <div className="card">
               {" "}
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}       {" "}
        </button>
                <p>
          Edit <code>src/App.jsx</code> and save to test HMR        {" "}
        </p>     {" "}
      </div>      <p className="read-the-docs">Click on the Vite and React logos to learn more       </p>
    </>
  );
}
export default App;

Ia menunjukkan bahawa terdapat data yang diindeks di sana. Walau bagaimanapun, apabila memaparkan semula halaman, kami kehilangan data kerana miniSearch ditetapkan semula. Kami tahu ini kerana kod ini:

function App() {
  return <>     </>;
}

export default App;

Dan lihat di bawah, ini ialah kandungan sebenar daripada console.log kami semasa menjalankan kod apabila ia dipaparkan.

{
 "blogs": [
 {
 "title": "Wolfenstein",
 "text": "Wolfenstein is a groundbreaking video game series that pioneered the first-person shooter genre. Debuting in 1981, it gained fame with Wolfenstein 3D (1992), placing players in World War II as an Allied spy battling Nazis. Known for its intense gameplay, alternate history, and stealth-action elements, the series continues to evolve with modern reboots and thrilling narratives.",
 "author": "voke",
 "id": "1"
 },
 {
 "title": "Bioshock",
 "text": "BioShock is a critically acclaimed video game series blending first-person shooting with deep storytelling. Set in dystopian worlds like the underwater city of Rapture and floating Columbia, it explores themes of power, morality, and free will. Known for its immersive environments, philosophical depth, and plasmid abilities, BioShock redefined narrative-driven gaming since its debut in 2007.",
 "author": "ese",
 "id": "2"
 },
 {
 "id": "3550",
 "author": "jite",
 "title": "Doom",
 "text": "Doom is a legendary first-person shooter series that revolutionized gaming with its 1993 debut. Players battle demons from Hell across Mars and Earth, armed with iconic weapons like the shotgun and BFG. Known for its fast-paced action, heavy metal soundtrack, and gory visuals, Doom remains a cornerstone of the FPS genre and a cultural phenomenon."
 }
 ]
}

Bab Empat Belas
Penyelesaian: MiniSearch Berterusan Menggunakan useRef:

Untuk mengelakkan miniSearch daripada ditetapkan semula pada setiap pemaparan, kami mengalihkannya ke useRef supaya kejadian yang sama berterusan merentas pemaparan. Begini caranya:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Blok kod ini memastikan bahawa satu contoh MiniSearch berterusan merentas pemaparan menggunakan useRef. miniSearchRef mencipta dan menyimpan contoh MiniSearch.

Dengan kod useRef ini, kita sepatutnya berada di rumah dan kering.

Menerangkan fungsi Carian pemegang:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Fungsi handleSearch mengambil apa sahaja jenis pengguna, ia mengemas kini pertanyaan keadaan dengan input pengguna. (event.target.value). Jika input kosong, ia mengosongkan keadaan keputusan dan menghentikan pemprosesan selanjutnya. Kemudian ia menggunakan miniSearch untuk mencari data yang diindeks dengan padanan kabur (membolehkan sedikit ketidakpadanan). Kemudian ia mengemas kini keadaan keputusan.

Bab Lima Belas
Kod Akhir:
Jadi kod terakhir kami dalam BlogList akan kelihatan seperti ini:

import { useEffect, useRef, useState } daripada "react";
import kelas daripada "./BlogList.module.scss";
import MiniSearch daripada "minisearch";

const BlogList = () => {
  //buat blog dan keadaan isLoading.
  const [blog, setBlogs] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  //buat pertanyaan dan keadaan keputusan.
  const [query, setQuery] = useState("");
  const [hasil, setResults] = useState([]);

  // menyemak sama ada keadaan blog telah diisi
  console.log(blog);

  const miniSearchRef = useRef(
    MiniSearch baharu({
      medan: ["tajuk", "pengarang", "teks"], // Medan untuk mencari
      storeFields: ["title", "author", "text"], // Medan untuk dikembalikan
    })
  );
  const miniSearch = miniSearchRef.current;
  console.log("Blog diindeks selepas rendering:", miniSearch.documentCount);

  //mengambil blog daripada pangkalan data palsu kami:
  const fetchBlogs = async () => {
    setIsLoading(true);

    cuba {
      respons const = tunggu fetch("http://localhost:8000/blogs");

      jika (!respon.ok) {
        buang Ralat baru();
      }

      data const = menunggu respons.json();
      console.log(data);

      miniSearch.removeAll();

      miniSearch.addAll(data);
      console.log("Indexed Blogs:", miniSearch.documentCount);

      setBlogs(data);
    } tangkap (ralat) {
      mesej const =
        ralat instanceof Ralat ? error.message : "Sesuatu telah berlaku";
      console.log(message);
    } akhirnya {
      setIsLoading(false);
    }
  };

  // fungsi carian:
  const handleSearch = (acara) => {
    setQuery(event.target.value);

    jika (event.target.value.trim() === "") {
      kembalikan setResults([]);
    }

    console.log(event.target.value);

    const searchResults = miniSearch.search(event.target.value, { fuzzy: 0.5 });
    console.log("searchResults:", searchResults);
    setResults(searchResults);
  };

  // Paparan bersyarat atau hasil carian atau blog
  const displayPosts = hasil.panjang > 0 ? keputusan : blog;

  useEffect(() => {
    fetchBlogs();
  }, []);

  kembali (
    <div>
            <h2>BlogList</h2>
      {isLoading && <p>Loading...</p>}     {" "}
      <div className={classes.search}>
               {" "}
        <input placeholder="search" value={query} onChange={handleSearch} />     {" "}
      </div>
            <div className={classes.blogs}>
        {displayPosts.map((blog) => {
          // {blogs.map((blog) => {
          kembali (
            <div
              key={blog.id}
              className={classes.blog}
             >



<p><strong>Bab Enam Belas</strong><br>
<strong>Mengujinya:</strong><br>
Sekarang jika saya menaip wolfenst, inilah yang ditunjukkan:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173282557470183.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"></p>

<p>Anda boleh lihat ia tidak menunggu saya mengejanya sepenuhnya sebelum menapisnya.</p>

<p><em>Mari kita cuba menaip secara kritis:</em></p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173282557528617.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"><br>
Secara kritis bukanlah nama tajuk, tetapi ia mencari melalui teks kami dan mengeluarkan setiap kandungan yang mengandungi perkataan secara kritis di dalamnya. Dan boleh dikatakan bahawa Bioshock adalah satu-satunya kandungan yang mempunyai kandungan kritikal di dalamnya.</p>

<p><strong>Pemikiran Akhir</strong><br>
Terima kasih kerana tetap bersama saya melalui perjalanan MiniSearch ini! Saya amat menghargai masa dan kesabaran anda, dan saya harap panduan ini telah membantu dalam menavigasi dan memahami cara mengintegrasikan MiniSearch dengan berkesan dalam projek Reactjs anda.</p>

<p><strong>Mengenai Pengarang</strong><br>
Voke Bernard ialah pembangun M.E.R.N yang bersemangat dan didorong, yang pakar dalam membina aplikasi React.js dan Express.js dinamik. Dia sentiasa mencari untuk bekerjasama dalam projek baharu. Jangan ragu untuk menghubunginya jika anda berminat untuk bekerja dengannya.</p>


          

            
        

Atas ialah kandungan terperinci Menggunakan MiniSearch dalam React: Carian Terperinci dan Penapisan Dipermudahkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!