Question

我想创建一个禁用本地过滤的语义ui“搜索选择下拉列表”。所需的行为与Google搜索输入非常相似：

用户输入搜索字词
远程加载与输入匹配的结果列表
用户使用鼠标或键盘选择其中一个结果

我们的应用程序有搜索远程内容的方法，因此我们不希望使用语义“API”功能。语义的本地过滤与我们的远程加载竞争，这导致不期望的用户体验。在加载远程内容之前，将显示“无结果”项，并在加载远程内容时保留在项列表中。

下拉模块必须有一组设置，可以禁用本地过滤

Answer 1

在撰写本文时，此问题尚无干净的解决方案。有几个悬而未决的问题尚未解决，请参阅 here 和 here。

我已经实施了一种解决方法：使用 Dropdown 组件，您可以使用 content 字段而不是 text 字段向用户显示选项。我已将每个选项的文本字段设置为 searchQuery，添加了一个额外的 original 字段以在更改文本之前跟踪文本并添加了 content 字段。这样，本地过滤将始终匹配所有选项。然后，当单击列表中的一个选项时，将 text 改回 original。

handleSearchChange = async (e, { searchQuery }) => {
  ...
  const response = await performSearchRequest(searchQuery);
  const results = response.data.hits
    .map((hit) => toKeyValueText(hit))
    .map((obj) => ({
      ...obj,
      text: searchQuery,
      original: obj.text,
      content: obj.content || obj.text,
    }));
  ...
  this.setState({
    isLoading: false,
    options: results,
    error: null,
  });
}

handleChange = (e, { options, value }) => {
  // find the selected option and restore the original value
  const selected = _find(options, { value: value });
  selected.text = selected.original;
  // now set only one option in the list of results
  this.setState({ options: [selected], value: value });
};

render() {
  const { options, isLoading, value, error } = this.state;
  ...
  return (
    <Dropdown
     search
     selection
     ...
     options={options}
     onChange={this.handleChange}
     onSearchChange={this.handleSearchChange}
    />
  )
}

给定一个搜索查询“mysearch”，选项列表将类似于：

const results = [
  { key: 'firstKey', value: 'valueA', text: 'mysearch', original: 'Nicely displayed value A', content: '<div>Nicely displayed value A</div>' },
  { key: 'secondKey', value: 'valueB', text: 'mysearch', original: 'Nicely displayed value B', content: '<div>Nicely displayed value B</div>' },
];

Here 一个工作示例（带有假数据，没有远程调用）。

语义ui搜索选择下拉列表禁用本地搜索

1 个答案: