CLASSFUNC BLOG
We Share Our Knowledge
Tìm kiếm với Fuse.js
Front-endReactJS
Lê Thành
10 Th02 2021 14:13

Tìm kiếm là một tác vụ cần thiết trong các site hay app như các trang blog, trang tin tức, thông tin. Sau đây mình sẽ chia sẻ kinh nghiệm tìm kiếm dữ liệu ở local với Fuse.js

Trang web chính thức của Fuse.js: https://fusejs.io/

Fuse.js là một công cụ tìm kiếm từ object, array, cụ thể nếu ta truyền vào 1 json dữ liệu, 1 hoặc nhiều từ khoá, nó sẽ cho ta một kết quả gần nhất với cách ta muốn matching kết quả đó. Các cách matching được viết ở đây

Dưới đây là 1 ví dụ về đoạn code ClassFunc sử dụng để tìm kiếm bài viết trong trang viết blog, sử dụng Fuse.js, react, ant-design và reactn:

import {Avatar, Input, Popover} from 'antd'; import React, {useState} from 'react'; import Fuse from 'fuse.js'; import {useGlobal} from 'reactn'; const {Search} = Input; export default function SearchComponent() { const [gPosts] = useGlobal('gPosts'); const [found, setFound] = useState(null); const fuse = React.useMemo(() => { return new Fuse(gPosts, { keys: ['title', 'content'], useExtendedSearch: true, }); }, [gPosts]); function onChange(e) { const searchText = e.target.value; if (!searchText) return; const results = fuse.search(`'${searchText}`); const items = results.map(result => result.item); // console.log(items); setFound(items); } if (!gPosts) return null; return ( <div className={'search-com'}> <Popover content={ found && <ul> { found.map(p => <li onClick={() => window.open(`/edit?id=${p.id}`)} > <a>{p.title}</a> by <Avatar src={p.author.photoURL}/> {p.author.displayName} </li>, ) } </ul> } title="Found" trigger="hover"> <Search // onSearch={onSearch} allowClear enterButton onChange={onChange} placeholder={'search'} /> </Popover> <style jsx>{ ` .search-com { display: flex; align-items: center; margin-right: 20px; } ` }</style> </div> ); }

Và đây là kết quả

Ảnh chụp Màn hình 2021-02-10 lúc 20.51.58.png

Giải thích cơ chế

  1. `gPosts` là biến lưu trữ dữ liệu (object hoặc array) được truyền vào để Fuse.js xử lý, ở đây sử dụng biến global `gPosts` được set từ một trang khác.
  2. Search text được truyền vào từ component `Search` của `antd`
  3. Fuse.js xử lý search
  4. Kết quả trả về được set vào biến `found` bằng hàm `setFound` và hiển thị.

Kết luận

Ưu điểm

  • Tìm kiếm được tối ưu hoá tốc độ vì không phải request lên server mà dùng dữ liệu có sẵn ở local.
  • Dễ thực hiện: json + từ khoá -> Fuse.js xử lý -> Kết quả.

Nhược điểm

  • Chỉ thực hiện search những gì có trên local nên nếu muốn tìm kiếm trên db có nhiều dữ liệu hơn phải dùng phương pháp khác.

p.s ClassFunc đang thực hiện những dự án sáng tạo và hi vọng có ích và giải quyết được nhiều nỗi đau của cộng đồng. Ae bạn bè nào có hứng thú với công nghệ, muốn tìm hiểu và challenge với công nghệ mới thì hãy gửi email về `hello@classfunc.com` hoặc gọi tới sđt 0966510002, mình cùng mang lại nhiều điều có ý nghĩa cho cộng đồng mình.

Cảm ơn các bạn.