Cách lọc kết quả tìm kiếm khi nhập bằng React

Thanh tìm kiếm là một cách tuyệt vời để giúp người dùng tìm thấy những gì họ cần trên trang web của bạn. Chúng cũng tốt cho việc phân tích nếu bạn theo dõi những gì khách truy cập của bạn đang tìm kiếm.

Bạn có thể sử dụng React để xây dựng một thanh tìm kiếm lọc và hiển thị dữ liệu khi người dùng nhập. Với React hooks và các phương thức mảng bộ lọc và bản đồ JavaScript, kết quả cuối cùng là một hộp tìm kiếm chức năng, đáp ứng.

các trang web phát trực tuyến phim miễn phí mà không cần đăng ký

LÀM VIDEO TRONG NGÀY

Tạo thanh tìm kiếm

Tìm kiếm sẽ lấy đầu vào từ người dùng và kích hoạt chức năng lọc. Bạn có thể sử dụng thư viện như Formik để tạo biểu mẫu trong React , nhưng bạn cũng có thể tạo thanh tìm kiếm từ đầu.

Nếu bạn chưa có dự án React và muốn tiếp tục, hãy tạo một dự án bằng lệnh create-react-app.

npx create-react-app search-bar

bên trong App.js , thêm phần tử biểu mẫu, bao gồm cả thẻ đầu vào:

export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
}

Bạn nên sử dụng useState Phản ứng móc và onChange sự kiện để kiểm soát đầu vào. Vì vậy, hãy nhập useState và sửa đổi đầu vào để sử dụng giá trị trạng thái:

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  }

Mỗi khi người dùng nhập nội dung nào đó bên trong phần tử đầu vào, xử lý cập nhật trạng thái.

Lọc dữ liệu khi thay đổi đầu vào

Thanh tìm kiếm sẽ kích hoạt tìm kiếm bằng cách sử dụng truy vấn mà người dùng cung cấp. Điều này có nghĩa là bạn nên lọc dữ liệu bên trong hàm handleChange. Bạn cũng nên theo dõi dữ liệu được lọc ở trạng thái.

Đầu tiên, hãy sửa đổi trạng thái để bao gồm dữ liệu:

const [state, setstate] = useState({ 
  query: '', 
  list: [] 
})

Việc đóng gói các giá trị trạng thái như thế này, thay vì tạo một cho mỗi giá trị, sẽ giảm số lần hiển thị, cải thiện hiệu suất.

Dữ liệu bạn lọc có thể là bất cứ thứ gì bạn muốn để thực hiện tìm kiếm. Ví dụ: bạn có thể tạo một danh sách các bài đăng blog mẫu như sau:

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ]

Bạn cũng có thể tìm nạp dữ liệu bằng API từ CDN hoặc cơ sở dữ liệu.

Tiếp theo, sửa đổi hàm handleChange () để lọc dữ liệu bất cứ khi nào người dùng nhập vào bên trong đầu vào.

const handleChange = (e) => { 
    const results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
}

Hàm trả về các bài viết mà không cần tìm kiếm chúng nếu truy vấn trống. Nếu người dùng đã nhập một truy vấn, nó sẽ kiểm tra xem tiêu đề bài đăng có bao gồm văn bản truy vấn hay không. Việc chuyển đổi tiêu đề bài đăng và truy vấn thành chữ thường đảm bảo so sánh không phân biệt chữ hoa chữ thường.

tại sao itunes không nhận ra iphone của tôi

Khi phương thức bộ lọc trả về kết quả, hàm handleChange cập nhật trạng thái với văn bản truy vấn và dữ liệu đã lọc.

Hiển thị Kết quả Tìm kiếm

Hiển thị kết quả tìm kiếm liên quan đến việc lặp qua mảng danh sách bằng cách sử dụng bản đồ và hiển thị dữ liệu cho từng mục.

export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
}

Bên trong thẻ ul, thành phần kiểm tra xem truy vấn có trống hay không. Nếu có, nó sẽ hiển thị một chuỗi trống vì nó có nghĩa là người dùng chưa tìm kiếm bất cứ thứ gì. Nếu bạn muốn tìm kiếm trong danh sách các mục mà bạn đang hiển thị, hãy bỏ dấu kiểm này.

Nếu truy vấn không trống, phương pháp bản đồ sẽ lặp lại các kết quả tìm kiếm và liệt kê các tiêu đề bài đăng.

Bạn cũng có thể thêm dấu kiểm hiển thị thông báo hữu ích nếu tìm kiếm không trả về kết quả.

<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul>

Việc thêm thông báo này sẽ cải thiện trải nghiệm người dùng vì người dùng không bị bỏ rơi vào khoảng trống.

Xử lý nhiều hơn một lần tham số tìm kiếm

Bạn có thể sử dụng trạng thái React và hook, cùng với các sự kiện JavaScript, để tạo phần tử tìm kiếm tùy chỉnh lọc mảng dữ liệu.

không thể xem pdf bằng chrome được không

Hàm bộ lọc chỉ kiểm tra xem truy vấn có khớp với một thuộc tính — title — trong các đối tượng bên trong mảng hay không. Bạn có thể cải thiện chức năng tìm kiếm bằng cách sử dụng toán tử OR lôgic để so khớp truy vấn với các thuộc tính khác trong đối tượng.