Выбор дизайна Ant - поиск и фильтрация параметров, отличных от значения, например, заголовка или ключа

#reactjs #antd

Вопрос:

У меня есть выпадающий список стран, как указано ниже:

 <Form.Item>
    <Select showSearch 
        optionFilterProp="children"
        disabled={isdisabled}
        placeholder={placeholder}
        onChange={(e) => this.onDropdownChange(value)}
    >
        {Countries.map((item) => <Option
            title={item.country_name} key={item.country_name}
            id={item.alpha_2} value={item.alpha_2}>
            {item.country_name}
        </Option>)}
    </Select>
</Form.Item>

Теперь, когда пользователь начинает вводить название любой страны, он должен фильтровать параметры на основе чего угодно, кроме value={item.alpha_2}. Это может быть ключ или заголовок. Мне нужно значение = {item.alpha_2} для других вещей и не может использоваться для поиска.

Ниже приведены возможные варианты для стран:

 Countries = [
    { country_name: 'Taiwan', alpha_2: 'TW'}
    { country_name: 'Tajikistan', alpha_2: 'TJ'}
    { country_name: 'Tanzania', alpha_2: 'TZ'}
    { country_name: 'Thailand', alpha_2: 'TH'}
    { country_name: 'Timor-Leste', alpha_2: 'TL'}
    { country_name: 'Togo', alpha_2: 'TG'}
    { country_name: 'Tokelau', alpha_2: 'TK'}
    { country_name: 'Tonga', alpha_2: 'TO'}
    { country_name: 'United Arab Emirates', alpha_2: 'AE'}
    { country_name: 'United Kingdom of Great Britain and Northern Ireland', alpha_2: 'GB'}
    { country_name: 'United States Minor Outlying Islands', alpha_2: 'UM'}
    { country_name: 'United States of America', alpha_2: 'US'}
    { country_name: 'South Africa', alpha_2: 'ZA'}
    { country_name: 'South Georgia and the South Sandwich Islands', alpha_2: 'GS'}
    { country_name: 'South Sudan', alpha_2: 'SS'}
]

Ниже приведен обновленный вывод, когда пользователь вводит «united» во вводе select:

Я пытался использовать onSearch, onInputKeyDown, filterOption, но ничего не сработало.

1. Я не понимаю, чего именно ты хочешь? когда пользователь вводит ‘united’, вы хотите, чтобы компонент показывал другой результат?

2. Нет @barzin. Ответ: я не хочу показывать другой результат. что я хочу, так это когда пользователь вводит «united», он показывает список, соответствующий введенному тексту / строке, и затем пользователь может выбрать из этого списка. в antd уже есть функция поиска, но она работает только для реквизита «значение». Я хочу, чтобы поиск работал по ключу или названию.

Ответ №1:

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

 return (
    <div className="App">
      <Select
        style={{ width: 200 }}
        showSearch
        optionFilterProp="children"
        placeholder={"select a country"}
        onChange={onDropdownChange}
        filterOption={(input, option) => {
          return (
            option.key.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
            option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
          );
          
        }}
      >
        {Countries.map((item) => (
          <Option
            title={item.country_name}
            key={item.country_name}
            id={item.alpha_2}
            value={item.alpha_2}
          >
            {item.country_name}
          </Option>
        ))}
      </Select>
    </div>
  );