2. Thực hiện bộ lọc (ok)

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>
</body>
</html>

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);
  }
  console.log(results);
  return (
    <>
      <header className="App-header">
        <div className="container">
          <h1>Futurama Characters</h1>
        </div>
      </header>
      <main className="container">
        <ul className="characters">
          <li className="character">
            <span className="character-thumb"></span>
            <ul className="character-meta">
              <li><strong>Name:</strong> Philip J. Fry</li>
              <li><strong>Company:</strong> Planet Express</li>
              <li><strong>Species:</strong> human</li>
            </ul>
          </li>
          <li className="character">
            <span className="character-thumb"></span>
            <ul className="character-meta">
              <li><strong>Name:</strong> Philip J. Fry</li>
              <li><strong>Company:</strong> Planet Express</li>
              <li><strong>Species:</strong> human</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;

Previous1. Chuẩn bị giao diện thực hành (ok)Next3. Hiển thị danh sách sau khi thực hiện bộ lọc (ok)

Last updated 4 years ago

Was this helpful?

<!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> </body> </html>

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); } console.log(results); return ( <> <header className="App-header"> <div className="container"> <h1>Futurama Characters</h1> </div> </header> <main className="container"> <ul className="characters"> <li className="character"> <span className="character-thumb"></span> <ul className="character-meta"> <li><strong>Name:</strong> Philip J. Fry</li> <li><strong>Company:</strong> Planet Express</li> <li><strong>Species:</strong> human</li> </ul> </li> <li className="character"> <span className="character-thumb"></span> <ul className="character-meta"> <li><strong>Name:</strong> Philip J. Fry</li> <li><strong>Company:</strong> Planet Express</li> <li><strong>Species:</strong> human</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;