Question

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

示例：

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

苹果
菠萝
Crusted Apple
越橘
黑莓

如果我搜索App，则返回以下结果

苹果
Crusted Apple

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

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

Answer 1

我是通过使用模式搜索覆盖此处建议的filterOptions道具react-select 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不允许在搜索文本中使用星号（*）进行搜索

1 个答案: