📘
Reactでincreamental search
import React, { useState, useEffect } from 'react'
const sampleData = [
'apple',
'banana',
'cherry',
'date',
'fig',
'grape',
'kiwi',
'lemon',
'mango',
'orange',
'papaya',
'pineapple',
's',
'st',
'str',
'stra',
'straw',
'strawb',
'strawbe',
'strawber',
'strawberr',
'strawberry',
]
const IncrementalSearch: React.FC = () => {
const [inputValue, setInputValue] = useState<string>('')
const [searchResults, setSearchResults] = useState<string[]>([])
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value)
}
useEffect(() => {
if (inputValue) {
const results = sampleData.filter((item) =>
item.toLowerCase().startsWith(inputValue.toLowerCase()),
)
setSearchResults(results)
} else {
setSearchResults([])
}
}, [inputValue])
return (
<div>
<input type="text" value={inputValue} onChange={handleChange} />
<ul>
{searchResults.map((result, index) => (
<li key={index}>{result}</li>
))}
</ul>
</div>
)
}
const App: React.FC = () => {
return (
<div>
<IncrementalSearch />
</div>
)
}
export default App
Discussion