英文:
Instant Search on Material UI AutoComplete Component
问题
被迫在使用AutoComplete Material UI组件提交表单时按两次回车。我希望只需选择一次选项就能导航到另一个网页。
我尝试过更改提交处理程序和纸张/框组件，但问题仍然存在。一旦我从AutoComplete的下拉菜单中选择一个选项，用户必须再次按回车。
英文:
Forced to press enter twice on form submission with AutoComplete Material UI component. I want to be able to only select the options once to navigate to another web page.
I attempted to change around the submission handler and the paper/box components, but the problem persists. Once I select an option from the dropdown menu from AutoComplete the user has to hit enter again.
答案1
得分: 1
你在AutoComplete组件上实现了即时搜索，使用了useEffect ReactJS。
import React, { useState, useEffect } from 'react';import { Autocomplete } from '@material-ui/lab';import { TextField } from '@material-ui/core';function searchAutocomplete({ option, onSelection }) {const [searchTermValue, setSearchTermValue] = useState('');const [filteredOptionValue, setFilteredOptionValues] = useState([]);useEffect(() => {setFilteredOptionValues(option.filter((option) =>option.label.toLowerCase().includes(searchTermValue.toLowerCase())));}, [searchTermValue, option]);return (<Autocompleteoption={filteredOptionValue}getOptionLabel={(option) => option.label}renderInput={(param) => (<TextField{...param}label="Search"variant="outlined"onChange={(event) => setSearchTermValue(event.target.value)}/>)}onChange={onSelection}/>);}
希望这段代码对你有帮助。
英文:
You implement instant search on the AutoComplete component, using useEffect ReactJS.
import React, { useState, useEffect } from 'react';import { Autocomplete } from '@material-ui/lab';import { TextField } from '@material-ui/core';function searchAutocomplete({ option, onSelection }) {const [searchTermValue, setSearchTermValue] = useState('');const [filteredOptionValue, setFilteredOptionValues] = useState([]);useEffect(() => {setFilteredOptionValues(option.filter((option) =>option.label.toLowerCase().includes(searchTermValue.toLowerCase())));}, [searchTermValue, option]);return (<Autocompleteoption={filteredOptionValue}getOptionLabel={(option) => option.label}renderInput={(param) => (<TextField{...param}label="Search"variant="outlined"onChange={(event) => setSearchTermValue(event.target.value)}/>)}onChange={onSelection}/>);}
Hope this code is useful for you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论