React选择搜索输入-Turkish小写字母"i“字符无法获得以"İ”开头的结果(单词)

Question

在我的应用程序中，我使用react-select组件来选择城市功能。组件呈现土耳其城市。因此，一些城市的名字以土耳其字母"İ-i“开头。每件事都是有效的，问题是，当我输入小写"i“时，我无法得到以"İ”开头的城市名，比如İzmir，İstanbul。

这是我的部件

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也表示土耳其字符İ，则需要将您的İ中的土耳其字符替换为拉丁字符(因为我确信您希望以这种方式显示这些字符)，或者提供一个自定义筛选函数来响应选择，以支持该字符的二元性。

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'))
  }

  ...
/>