使用semantic-ui框架和ajax请求自动完成或预先输入搜索框 [英] Auto-complete or type-ahead search box using the semantic-ui framework and an ajax request

问题描述

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

I'm using the semantic-ui framework to create a simple search form that uses auto-complete information generated by calling an api via an ajax request.

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

The server endpoint generates a simple JSON array

例如
http://data.nzor.org.nz/names/lookups ？query = lu

给出

[Lubbockia，Lubbockia aculeata， Lubbockia squillimana，Lucanidae]

["Lubbockia","Lubbockia aculeata","Lubbockia squillimana","Lucanidae"]

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

I can see the search making the request but I'm not sure how to get the results to display.

我在 http://jsfiddle.net/6ojkdvnn/创建了一个jsfiddle 4 /

$(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）但我不太清楚如何使它工作。

I have tried various options but have now stripped it back to the basic settings above so as not to confuse the matter. The documentation is pretty good (http://semantic-ui.com/modules/search.html) but I can't quite see how to make it work.

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

I'd prefer not change the api response if it can be helped.

推荐答案

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

I too had problem with the seach api of the Semantic-UI.

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

So after some researchs, i learned that it can be used this way:

# 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函数的方法调用。

Semantic-UI (search) expects a "results" as root and nodes with childs content with title and description, and others that api specify. So if you had json result with other names, then you have to change in the method call of searc function.

因此，我改变了结果 cities ， title for name 和说明到州。

Because of this, i changed results for cities, title for name and description to state.

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

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

In my Routes file i specify the get method that return a collection.

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

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

And using the Rabl gem i format the output of json file:

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

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

这就是全部，它对我有用。

Thats it's all, it works for me.

这篇关于使用semantic-ui框架和ajax请求自动完成或预先输入搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！