Блог

это и есть код..

поэтому , когда система находит какие-либо результаты совпадения , она возвращает их все, что раздражает, потому что в моих данных 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

Не знаю, как конкретно это сделать в antd, но вы всегда можете вручную отфильтровать список для автозаполнения.

Пример:

 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 результатах (в этом примере).

в этом случае вам придется изменить алгоритм фильтрации, чтобы использовать регулярные выражения для лучшего соответствия, а затем вы можете выполнить обрезку результатов.