如何限制自动完成输入的结果数量 / ant.design

Question

这是代码..

所以当系统找到任何匹配结果时，它 returns 所有匹配结果，这很烦人，因为我的数据中有 1000 个结果

所以我不需要向用户显示所有匹配结果，我只需要显示前 5

import { AutoComplete } from 'antd';
const options = [
  {
    value: 'Test 1',
  },
  {
    value: 'Test 2',
  },
  {
    value: 'Test 3',
  },
  {
    value: 'Test 4',
  },
  {
    value: 'Test 5',
  },
  {
    value: 'Test 6',
  },
  {
    value: 'Test 7',
  },
  {
    value: 'Test 8',
  },
  {
    value: 'Test 9',
  },
  {
    value: 'Test 10',
  }
];

const Complete = () => (
  <AutoComplete
    style={{
      width: 200,
    }}
    options={options}
    placeholder="try to type `b`"
    filterOption={(inputValue, option) =>
      option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
    }
  />
);

ReactDOM.render(<Complete />, mountNode);

我是从这里拿来的，他们 api 没有任何东西可以阻止这种情况发生 https://ant.design/components/auto-complete/#components-auto-complete-demo-non-case-sensitive

Answer 1

不确定如何在 antd 中具体执行此操作，但您始终可以手动过滤自动完成列表。

Example:

function FilterMatch(searchTerm) {
    return (option, index, array) => 
        option.value.toUpperCase().indexOf(searchTerm.toUpperCase()) !== -1;
}

// setup
var [searchTerm, setSearchTerm] = useState('');
var filteredOptions = options.filter(FilterMatch(searchTerm))
                             .filter((_, index) => index < 5);

...

// usage
<Autocomplete options={filteredOptions} onSearch={(text) => setSearchTerm(text)} />

警告： 即使在选项列表中找到了搜索词，它也可能不会显示，除非明确输入或者它在前 5 个结果中（本例） .

在这种情况下，您必须更改过滤算法以使用 RegEx 来更好地匹配，然后您可以对结果进行修剪。

如何限制自动完成输入的结果数量 / ant.design

how to limit the number of results for autocomplete input / ant.design

reactjs

input

autocomplete

antd