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

Question

在我的应用程序中，我正在使用react-select组件来选择城市功能。组件渲染土耳其城市。因此，一些城市名称以土耳其语字符“\xc4\xb0-i”开头。一切正常。但问题是，当我输入小写“i”时，我无法获得以“\xc4\xb0”开头的城市名称，例如\xc4\xb0zmir、\xc4\xb0stanbul。

\n

这是我的组件

\n

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

\n

因此，要获取这些城市，我应该输入完全大写的“\xc4\xb0”。有什么办法可以解决这个问题吗？我被这个烦人的错误困住了。

\n

以下是案例截图。

\n

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

\n

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

\n

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

\n

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

\n

--- 更新 --- \n我解决了，伙计们。

\n

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

\n

Answer 1

如果您希望拉丁字符 i 也代表土耳其字符 \xc4\xb0，则需要替换您的土耳其字符label with latin characters (a poor solution since I\'m sure you want to show them that way) or provide a custom filter function to react select that will support that character duality.

\n\n

filterOption={this.customFilter}\n

\n\n

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

\n\n

.replace(/\xc4\xb0/gim, "i")\n

\n\n

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

\n\n

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

\n