jquery - Semantic-UI 中的搜索模块

Question

有人有使用 Semantic-UI 搜索模块的示例吗？

安Issue说会有文档，这是 Module

HTML:

<form action="/web/quickSearch" class="ui search" method="GET">
<div class="ui input">
    <input type="text" placeholder="Search..." autocomplete="off" name="query" class="prompt">
</div>
<div class="results"></div>
<div class="ui green button" style="padding:0.8em 1.5em;margin-top:-1px;margin-left:-25px;float:none;">Search</div>

我的称呼非常简单:

$(".ui.search").search("/web/quickSearch");

它实际上调用了 GET，但它根本不附加查询，尽管我在 .api 中看到它作为“urlData”的一部分，我还需要添加什么才能正确连接它？

有什么想法吗？

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

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

因此，我更改了城市的结果、名称的标题和描述 到状态。

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

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

在我的路由文件中，我指定返回集合的 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] }

仅此而已，它对我有用。