使用semantic-ui框架和ajax请求自动完成或预先输入搜索框

Question

我正在使用semantic-ui框架创建一个简单的搜索表单，该表单使用通过ajax请求调用api生成的自动完成信息。

服务器端点生成一个简单的JSON数组

e.g。 http://data.nzor.org.nz/names/lookups?query=lu

给出

[“Lubbockia”，“Lubbockia aculeata”，“Lubbockia squillimana”，“Lucanidae”]

我可以看到发出请求的搜索，但我不确定如何显示结果。

我在http://jsfiddle.net/6ojkdvnn/4/

创建了一个jsfiddle

$(document)
.ready(function () {

 $('.ui.search')
  .search({
      apiSettings: {
          url: 'http://data.nzor.org.nz/names/lookups?query={query}'
      },
      debug: true,
      verbose: true
  });
});

我尝试了各种选项，但现在已将其剥离回上面的基本设置，以免混淆此事。文档非常好（http://semantic-ui.com/modules/search.html），但我不太清楚如何使它工作。

如果可以帮助我，我宁愿不改变api响应。

Answer 1

我也遇到了Semantic-UI的搜索API问题。

经过一些研究，我了解到它可以这样使用：

我也在使用Ruby on Rails。

jQuery文件自动填充城市名称：

# Semantic-Ui Search
# Sets for autocomplete name of cities while typing.
$('.ui.search.city').search
  apiSettings: 
    action: 'search', url: '/cities/autocomplete.json?query={query}'
  fields:
    results : 'cities'
    title   : 'name'
    description   : 'state'
  minCharacters : 3

Semantic-UI（搜索）期望“结果”作为根，节点具有带标题和描述的子内容，以及api指定的其他内容。因此，如果你有其他名称的json结果，那么你必须改变searc函数的方法调用。

因此，我更改了results的{​​{1}}，cities的{​​{1}}和title的{​​{1}}。

在我的控制器中，我刚刚发了这样一个查询：

name

在我的Routes文件中，我指定了返回集合的get方法。

description

使用state gem我格式化json文件的输出：

def autocomplete    
  @cities = City.includes(:state).order(:name).where('name like ?', "%#{params[:query]}%")
end

多数民众赞成，这对我有用。

Answer 2

现在，对于查询http://data.nzor.org.nz/names/lookups?query=lu，服务器使用XML数据进行响应。它不是JSON。

<ArrayOfString xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <string>Lubbockia</string>
  <string>Lubbockia aculeata</string>
  <string>Lubbockia squillimana</string>
  <string>Lucanidae</string>
  <string>Lucaninae</string>
  <string>Lucerapex</string>
  <string>Lucerapex angustatus</string>
  <string>Lucerne</string>
  <string>Lucerne Australian latent virus</string>
  <string>Lucerne dodder</string>
</ArrayOfString>

Answer 3

在search模块代码中，语义需要response.success中的response.results和response对象

例如，第1050行，if(response.results !== undefined) {

在API描述中，不清楚是否可以在使用Semantic之前修改响应。可以使用回调onSuccess: function() { 描述于http://semantic-ui.com/behaviors/api.html#/usage

但我持怀疑态度......