reactjs - react-select 不允许在搜索文本中使用星号（*）进行搜索

Question

当我在其中搜索带有星号（*）字符的数据时，ajax 返回结果，但它不会显示在选择列表中。

例子：

我有通过starts_with搜索的搜索引擎，对于部分搜索，我需要在字符串前面添加星号（*）。

• 苹果
• 菠萝
• 结痂的苹果
• 覆盆子
• 黑莓

如果我搜索App它返回以下结果

• 苹果
• 结痂的苹果

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

当我添加星号（*）时，ajax 调用返回结果，但结果未显示在列表中。

Answer 1

我已经通过覆盖这里建议的filterOptions道具来做到这一点 -不允许使用模式搜索在搜索文本中使用星号（*）进行搜索。react-select

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