如何使用html datalist使输入框显示与用户输入开头匹配的选项？
如何使用html datalist使输入框显示与用户输入开头匹配的选项？
提问于 2022-08-16 18:17:12
我是新的反应，并希望实现一个自动完成建议框的文本输入框，它只匹配选项的第一个字母，而不是任何子字符串，这是<datalist>的当前行为。
我在jQuery中找到了很好的答案，实现了我所需要的行为。我只是很难找到一种方法，我可以实现这种行为使用反应语法。
以下是我到目前为止找到的jQuery解决方案。
How to make datalist match result from beginning only
HTML5 Datalist auto suggest shows the list that starts with the search keyword
下面是我当前的代码结构：
<div className="form-field word-field">
<label>Word</label>
<Field list="word_list" id="word" name="word" />
{errors.word && touched.word && <div className="validation-error">{errors.word}</div>}
<datalist id="word_list">
<option>Arc</option>
<option>House</option>
<option>Handle</option>
<option>Chair</option>
<option>Door</option>
</datalist>
</div>能否向我提供如何实现这一目标的指导？我应该调查什么来得到我需要的行为？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-16 18:39:28
我开发了一个使用datalist实现此功能的简单组件：
import { useState } from "react";
const initialOptionsArr = [
"India",
"United States",
"United Kingdom",
"Germany",
"France",
"Israel"
];
export default function App() {
const [options, setOptions] = useState(initialOptionsArr);
const handleInputChange = ({ target }) => {
if (target.value) {
const filteredOptions = initialOptionsArr.filter((option) =>
option.toLowerCase().startsWith(target.value.toLowerCase())
);
setOptions(filteredOptions);
} else {
setOptions(initialOptionsArr);
}
};
return (
<div>
<input
type="text"
list="countries"
name="mycountry"
id="countryInput"
onChange={handleInputChange}
/>
<datalist id="countries">
{options.map((item) => (
<option value={item}>{item}</option>
))}
</datalist>
</div>
);
}这段代码使用useState钩子，非常简单。如果这对你有帮助，请告诉我。下面是上面的一个沙箱链接：https://codesandbox.io/s/funny-hodgkin-7lsu5v?file=/src/App.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73378540
复制相关文章
相似问题
腾讯云开发者
