社交图标 搜索过滤器

问题描述

我想向我的页面添加社交图标过滤器，是否有任何 API 或任何我可以使用的方法。 就像这是我制作的照片实时搜索过滤器

import React,{ useState } from 'react';
import SearchRes from './SearchRes'
const Search=()=>{
  const [img,setImg]= useState('');
   const inputEvent =(event)=>{
  const data= event.target.value;
  setImg(data);
 }
 return (
 <>
 <div className=' searchbar'>
 <input type="text" placeholder='search item' onChange={inputEvent}
  value={img}
 />
 {img===''?null: <SearchRes name={img}/>}

 </div>
  </>
     )
  }
  export default Search;

解决方法

首先，您必须创建要搜索的数据集（或使用第三方 API），然后遍历数组数据集并捕获预期值。

例如（伪代码）：

const dataset = Object.freeze([
  "Google","Youtube","Facebook","Instagram","VK","etc",]);

const Search = () => {
  const [items,setItems] = useState([]);

  const handleOnChange = (event) => {
    const keyword = event.target.value;
    const filtredData = dataset.filter((item) => item.includes(keyword));
    setItems(filtredData);
  };

  return (
    <div className=" searchbar">
      <input type="text" placeholder="search item" onChange={inputEvent} />
      {items.map((itemName) => (
        <SearchRes name={itemName} />
      ))}
    </div>
  );
};