react-select 不允许在搜索文本中使用星号 (*) 进行搜索

Question

当我搜索其中包含星号(*) 字符的数据时，ajax return 是结果，但它不会显示在select 列表中。

示例：

我有搜索引擎starts_with，对于部分搜索我需要在字符串前面添加星号(*)。

苹果
菠萝
结痂苹果
越橘
黑莓

如果我搜索 App 它 return 结果如下

苹果
结痂苹果

要让 Pineapple 包含在列表中，我需要在苹果前面添加星号，例如 *apple

当我添加星号(*)时ajax调用return结果，但结果没有显示在列表中。

Answer 1

我已经按照此处的建议覆盖了 react-select 的 filterOptions 道具 - Doesn't allow search with asterisk(*) in search text 使用模式搜索。

filterOptions(options, filterValue, excludeOptions, props) {
    var _this = this;
    var patternSearch = false;

    if(filterValue.contains("*")) {
      filterValue = filterValue.replace(/[*]/g, "[a-zA-Z0-9]*");
        patternSearch = true;
    }

    if (props.ignoreCase) {
      filterValue = filterValue.toLowerCase();
    }

    if (excludeOptions) excludeOptions = excludeOptions.map(function (i) {
      return i[props.valueKey];
    });

    return options.filter(function (option) {
      if (excludeOptions && excludeOptions.indexOf(option[props.valueKey]) > -1) return false;
      if (props.filterOption) return props.filterOption.call(_this, option, filterValue);
      if (!filterValue) return true;
      var valueTest = String(option[props.valueKey]);
      var labelTest = String(option[props.labelKey]);

      if (props.ignoreCase) {
        if (props.matchProp !== 'label') valueTest = valueTest.toLowerCase();
        if (props.matchProp !== 'value') labelTest = labelTest.toLowerCase();
      }

      if (patternSearch) {
        return props.matchProp !== 'value' && labelTest.match(sfilterValue);
      }
      else {
        return props.matchPos === 'start' ? props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue || props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue : props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0 || props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0;
      }
  });
}

react-select 不允许在搜索文本中使用星号 (*) 进行搜索

react-select Doesn't allow search with asterisk(*) in search text

reactjs

react-select