javascript - 使用语义 ui 框架和 ajax 请求的自动完成或提前输入搜索框

Question

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

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

例如 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 的 seach 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

语义 UI(搜索)期望“结果”作为根节点和带有标题和描述的子内容的节点，以及 api 指定的其他内容。因此，如果您有其他名称的 json 结果，则必须更改 searc 函数的方法调用。

因此，我更改了 results 为 cities，title 为 name 和 description 到 state。

在我的 Controller 中，我刚刚做了一个这样的查询:

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

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

# Resources for cities.
resources :cities, only: :index do
  get :autocomplete, :on => :collection
end

并使用 Rabl gem 格式化 json 文件的输出:

collection @cities, root: :cities , object_root: false

attributes :id, :name
node(:state) { |city| city.state.name }
node(:query) { params[:query] }

就是这样，它对我有用。