React-Select 搜索输入-土耳其语小写 "i" 字符无法获取以“İ”开头的结果（单词）

Question

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

这是我的组件

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 中的土耳其字符替换为拉丁字符（一个糟糕的解决方案，因为我确定您想要以这种方式向他们展示）或提供自定义过滤器功能来做出反应select，这将支持该字符二元性。

filterOption={this.customFilter}

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

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

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

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

}

Answer 2

我找到了解决办法。就在这里，用正则表达式。现在完美了。

export const turkishCharacterRegex = keyword => keyword
  .replace(/[ıİiI]/g, '[ıİiI]')
  .replace(/[şŞsS]/g, '[şŞsS]')
  .replace(/[çÇcC]/g, '[çÇcC]')
  .replace(/[ğĞgG]/g, '[ğĞgG]')
  .replace(/[öÖoO]/g, '[öÖoO]')
  .replace(/[üÜuU]/g, '[üÜuU]');


 const customFilter = (option, searchText) =>((turkishCharacterRegex(option.data.label)).toLowerCase().includes(turkishCharacterRegex(searchText).toLowerCase()));

    <Select
      -----
      -----
      -----
      filterOption={customFilter}
    />

Answer 3

我遇到了同样的问题，我的解决方案是使用 toLocaleLowerCase 方法。它可能比正则表达式更容易理解。

<Select
  ...

  filterOption={(option, query) =>
    String(option.data.label)
      .toLocaleLowerCase('tr')
      .includes(query.toLocaleLowerCase('tr'))
  }

  ...
/>

React-Select 搜索输入-土耳其语小写 "i" 字符无法获取以“İ”开头的结果（单词）

React-Select search input -Turkish lowercase "i" character does not work to get results (words) starting with "İ"

reactjs

react-select