React filter實作search功能

React 使用 input 來實作搜尋功能

使用 startsWith 比對的話 會從第一位數去找,

這樣如果你打的關鍵字是在第一位元以外的話 都會找不到.

使用模糊比對的話, 可以解決此問題

改用 includes 即可

以下為代碼示例:

import React, { useState } from 'react'

import './style.less'

function SearchDemo() {

// 測試搜尋字段用

const searchData = [

{ name: '1好1' },

{ name: '2高2' },

{ name: '33三四五' },

]

const [filterGames, setFilterGames] = useState(searchData);

const [name, setName] = useState(undefined);

// Filter

const filter = (e: any) => {

const keyword = e.target.value;

if (keyword !== "") {

const results = searchData.filter((i) => {

return i.name.toLowerCase().includes(keyword.toLowerCase());

});

setFilterGames(results);

} else {

setFilterGames(searchData);

}

setName(keyword);

};

return (

<div className="container">

<div className='search-box'>

<input

type="search"

value={name}

onChange={filter}

className="input"

placeholder="请输入游戏名称"

/>

</div>

<div className='flex-box'>

{name == undefined && searchData.length > 0 ? <> {

searchData.map((game: any, index: number) => {

return (

<div key={index} className="in-box">

<p>{game.name}</p>

</div>

)

})

}</> : <><p>暫無數據</p></>

}

</div>

</div>

)

}

export default SearchDemo