限制建议“自动完成”组件的数量
菲奎特
我一直在寻找自动完成组件的（https://material-ui.com/api/autocomplete/）API，但是我似乎找不到一种方法（根据我对JavaScript的有限了解） TextField下面的某些选项。
我正在尝试将搜索功能与7,000多个数据结合在一起，但我不想一次显示所有信息。如何将选项限制为最多10条建议？
贝蒂达
可以使用filterOptionsprop和createFilterOptionsfunction来完成。
...
import { Autocomplete, createFilterOptions } from "@material-ui/lab";
const OPTIONS_LIMIT = 10;
const defaultFilterOptions = createFilterOptions();
const filterOptions = (options, state) => {
return defaultFilterOptions(options, state).slice(0, OPTIONS_LIMIT);
};
function ComboBox() {
return (
<Autocomplete
filterOptions={filterOptions}
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
TEdit：自动完成并限制最小数量
- 2
如何限制jQuery自动完成结果的数量？
- 3
输入特定数量的字符后限制自动完成绑定
- 4
Eclipse自动完成而不显示建议的建议
- 5
如何将Wikipedia API自动完成建议限制为某个类别？
- 6
自动完成建议不显示
- 7
删除zsh自动完成建议
- 8
如何限制flyspell给出的“建议”的数量？
- 9
YUI自动完成建议并提交
- 10
Codemirror自动完成删除全局建议
- 11
使用Python快速生成自动完成建议
- 12
jQuery自动完成建议未排序
- 13
VSCode终端建议未自动完成
- 14
自动完成功能会阻止建议
- 15
终端自动完成：循环浏览建议
- 16
YUI自动完成建议并提交
- 17
批量插入弹性搜索自动完成建议
- 18
jQuery自动完成建议未排序
- 19
WebStorm TypeScript较少的自动完成建议
- 20
UITextField 中的 WKWebView 自动完成建议
- 21
输入时忽略自动完成建议
- 22
PrimeNG 自动完成不显示建议
- 23
Ubuntu 19.04 单词预测/建议/自动完成
- 24
如何过滤谷歌地点自动完成建议？
- 25
自动完成输入建议不起作用
- 26
jQuery自动完成组件
- 27
jQuery自动完成组件
- 28
如何缓存自动建议组件的结果？
- 29
如何缓存自动建议组件的结果？
我来说两句