javascript-使用语义UI框架和Ajax请求的自动完成搜索或预输入搜索框

我正在使用语义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响应.

解决方法:

我也对语义UI的seach api有问题.

因此,经过一些研究,我了解到可以通过以下方式使用它：

我也在使用Ruby on Rails.

jQuery File自动完成城市名称：

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

因此,我将城市的结果,名称的标题和描述更改为州.

在我的控制器中,我只是这样查询：

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] }

就是这样,它对我有用.

标签：semantic-ui,javascript
来源： https://codeday.me/bug/20191121/2048109.html