Question

API问题在这里。我尝试使用Semantic UI提供的search（自动填充）模块。看看API，我似乎找不到一种方法来将它与一个加载数据异步的自定义函数一起使用。我发现的所有示例都使用固定的URL：

$('.ui.search').search({
  apiSettings: {
    url: '//api.github.com/search/repositories?q={query}'
  }
});

我试图将这个组件与google places api（geocode一起使用，你接下来看到的是我写的一个瘦的承诺包装器，以便更轻松地使用它）。我尝试按照＆＃34;行为＆＃34; docs的一部分：

$searchComponent.search({
  source: [],
  onSearchQuery(query) {
    // cancel original behaviour
    $searchComponent.search('cancel query'); 
    geocode({ input: query }).then(results => {
      // build suggestions
      const suggestions = results.map(place => ({ title: place.description }));
      // generate results for the newly created suggestions
      $searchComponent.search('generate results', suggestions);
      // finally show the autocomplete panel
      $searchComponent.search('show results');
    })
  },
})

但它似乎没有为.search(method)电话做任何事情，取消/生成/显示似乎没有做任何事情。我做错了吗？

Answer 1

嗯，这不太清楚，但现在是：

$searchComponent.api({
  responseAsync(settings, callback) {
    const query = settings.urlData.query;
    // make sure to transform result to an acceptable format
    asyncRequest(results => callback(result));
  }
}).search({ /* other config, like searchDelay */ })

Answer 2

以防有人在这里寻找完全自定义添加结果（如在级联搜索的情况下），这里是如何做到的：

$searchComponent.search('add results',
    $searchComponent.search('generate results', { results: <<results>> })
);

就我而言，我在onSelect设置了第二级结果。

语义UI搜索自定义数据源

2 个答案: