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ả

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.