3. Hiển thị danh sách sau khi thực hiện bộ lọc (ok)

C:\Users\Administrator\Desktop\fusejs\src\App.js

import React, { useState } from 'react';
import './App.css';
import Fuse from 'fuse.js';
import characters from './characters.json';
function App() {
  const [query, updateQuery] = useState('');
  const fuse = new Fuse(characters, {
    keys: [
      'name',
      'company',
      'species'
    ],
    includeScore: true
  });
  const results = fuse.search(query);
  function onSearch({ currentTarget }) {
    updateQuery(currentTarget.value);
  }
  const characterResults = query ? results.map(character => character.item) : characters;
  console.log(characterResults);
  return (
    <>
      <header className="App-header">
        <div className="container">
          <h1>Futurama Characters</h1>
        </div>
      </header>
      <main className="container">
        <ul className="characters">
          {
            characterResults.map((character)=> {
              const { name, company, species, thumb } = character;
              return (
                <li className="character" key={name}>
                  <span className="character-thumb" style={{backgroundImage:`url(${thumb})`}}></span>
                  <ul className="character-meta">
                    <li><strong>Name:</strong> {name}</li>
                    <li><strong>Company:</strong> {company}</li>
                    <li><strong>Species:</strong> {species}</li>
                  </ul>
                </li>
              )
            })
          }
        </ul>
        <aside>
          <form className="search">
            <label>Search</label>
            <input type="text" value={query} onChange={onSearch} />
          </form>
        </aside>
      </main>
      <footer>
        <div className="container">
          <p>
            Images from <a href="http://www.cc.com/shows/futurama">Futurama</a> via <a href="https://futurama.fandom.com/">futurama.fandom.com</a>
          </p>
        </div>
      </footer>
    </>
  )
}
export default App;

C:\Users\Administrator\Desktop\fusejs\test.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h2>Bước 2: Xây dựng bộ lọc</h2>
	<pre>
		const fuse = new Fuse(characters, {
		keys: [
			'name',
			'company',
			'species'
		],
		includeScore: true
		});
		const results = fuse.search(query);
		const [query, updateQuery] = useState('');
		function onSearch({ currentTarget }) {
		  updateQuery(currentTarget.value);
		}
	</pre>
	<h2>Bước 3: Hiển thị danh sách sau khi thực hiện bộ lọc</h2>
	<pre>
		const characterResults = query ? results.map(character => character.item) : characters;
	</pre>
</body>
</html>
Previous2. Thực hiện bộ lọc (ok)NextHow to Add Search to a React App with Fuse.js

Last updated

Was this helpful?