需求场景： React项目，当输入框无内容的时候，面板展示历史搜索记录。当输入后，实时展示联想搜索结果。同时接入SDK提供的语音输入功能。
1. 选择三方库
对比了网上的一些AutoComplete库，设计样式和功能最符合的是Material UI里面的组件AutoComplete。 对比各版本内容,确定使用v5.16.0,因为V4还处于lab阶段。
2.引入
// 安装
npm install @mui/material @emotion/react @emotion/styled
//引入
import Autocomplete from '@mui/material/Autocomplete';
// 修改默认样式
import { ThemeProvider, createTheme } from '@mui/material/styles';
const theme = createTheme({
components: {
MuiAutocomplete: {
styleOverrides: {
root: {
width: "6.52rem", fontSize: "0.28rem", height: "0.55rem"
},
...
}
}
}
})
如果想要修改更多的默认样式： 参考classes属性。
将主题加入代码
<ThemeProvider theme={theme}>
<Autocomplete
id="asynchronous"
...
/>
</ThemeProvider>
3.常用属性含义
options
联想面板的内容,类似select组件的options属性。可以通过renderOption渲染自定义的option项。
如： 增加删除功能，高亮等。
autoHighlight
作用：点击enter时默认选项，如果没有该项配置，则键盘enter后会出现输入框为undefined的情况。
freeSolo
组件的值默认从options中选取。但是如果数据库不够丰富，联想接口可能经常返回空项，即没有可选择项。 但是我们仍然需要将输入框中的内容进行发送查询。
需要将freeSolo设为true，则值将不再依赖options选项。
onInputChange
该项获取的值主要用于实时联想，每键入一个值，就会执行一次搜索。
value/onChange
该项获取的值主要用于最终需要搜索的数据。unControlled组件不使用属性value属性。
和inputValue不同。需要单独维护。
4. 一些功能实现
表单清空
想要手动通过输入框最右侧的删除按钮清空表单的值。我没找到具体的方法。只能通过操作DOM实现。
// 查询完成后清空
const ele = autoRef.current.querySelector('.MuiAutocomplete-clearIndicator');
ele && ele.click();
可控组件
默认使用unControlled状态。如果要通过手动控制组件的值，需要通过value的传参进行控制。 前提条件是初始值不能为undefined，所以初始值不能为空。
const [value, setValue] = React.useState({targetId: 11, text：""});
使用场景： 监听SDK返回的语音输入文本后需要通过setValue进行手动赋值。
长按录音
