reactjs - React-Select 搜索输入-土耳其语小写 "i"字符不起作用获取以 "İ"开头的结果(单词)

Question

在我的应用中，我使用 react-select 组件来选择城市功能。组件呈现土耳其城市。因此，一些城市名称以土耳其字符“İ-i”开头。一切正常。但问题是，当我输入小写“i”时，我无法获得以“İ”开头的城市名称，例如伊兹密尔、 Istanbul 尔。

这是我的组件

import Select from 'react-select';
import {
  FormGroup,
  Input,
  Label,
  Col,
} from 'reactstrap';

<FormGroup row>
  <Col xs="12" md="9">
    <Label htmlFor="text-input">{t('RESTAURANT_DETAILS.GENERAL_INFO.CITY')}</Label>
    <Select
      placeholder={i18n.t('CHOOSE_CITY')}
      isDisabled={!this.state.editable || accountingLoading}
      options={this.state.cities.map(city => ({
        value: city.code,
        label: city.city,
      }))}
      value={this.state.city}
      onChange={val => this.onCitySelected(val)}
    />
  </Col>
</FormGroup>

因此，要获得这些城市，我应该准确地键入大写的“İ”。有什么办法可以解决这个问题吗？我被这个烦人的错误困住了。

这里是案例截图。

https://cdn1.imggmi.com/uploads/2019/9/1/fa7b5ca6e264501abb395b4ac38c753d-full.png

https://cdn1.imggmi.com/uploads/2019/9/1/4c6f5c8e1c891a3d2ae8ee38dbfadb79-full.png

https://cdn1.imggmi.com/uploads/2019/9/1/0c3ae965754e60a015ea048ddd081f51-full.png

https://cdn1.imggmi.com/uploads/2019/9/1/7ee3c8187ea4830386ff45cbd40ee126-full.png

---更新---我解决了伙计们。

我将其添加为下面的答案。

Answer 1

如果您希望拉丁字符 i 也代表土耳其字符 İ，您需要将 label 中的土耳其字符替换为拉丁字符(一个糟糕的解决方案，因为我确信您想以这种方式向他们展示)或提供自定义过滤器功能来响应选择，以支持该字符二元性。

filterOption={this.customFilter}

这是一个替换字符串中土耳其语字符的例子

.replace(/İ/gim, "i")


这是一个示例自定义过滤器。

customFilter = (option, searchText) => {
   if (
     option.data.label.includes(searchText.toLowerCase())
   ) {
     return true;
   } else {
     return false;
   }

}