Semantic-UI 中的搜索模块答案

【问题标题】：Search Module in Semantic-UISemantic-UI 中的搜索模块
【发布时间】：2014-05-06 17:27:24
【问题描述】：

有人有使用 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”的一部分，但我还需要添加什么才能正确连接它？

有什么想法吗？

【问题讨论】：

标签： jquery search semantic-ui

【解决方案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。

在我的控制器中，我刚刚做了这样的查询：

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

就是这样，它对我有用。

【讨论】：

【解决方案2】：

我推荐使用最新版本的 search.js 和 api.js

https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/behaviors/api.js https://github.com/Semantic-Org/Semantic-UI/blob/css/src/definitions/modules/search.js

API 允许您使用 url 模板创建端点，这允许您在一个地方指定您的 API，并在运行时替换 url 变量。

例如，在最近的一个项目中，我使用了这样的 API 映射

  $.api.settings.api = {
    emailArticle     : '/api/article/ajax/{id}',
    getArticles      : '/api/article/{type}/{date}/{limit}/{/page}/{/filter}/',
    homepageArticles : '/api/featured/{homepageID}/{lastID}',
    latestArticles   : '/api/next/{offset}',
    search           : '/api/search/{query}'
  }

URL 模板对 URL 的可变部分使用字符串模板。

您可以使用 {$variable} 或 {variable} 指定所需的参数，这是您的偏好。
您可以使用 {/$variable} 或 {/variable} 指定可选参数。

如果在运行时未包含必需变量，则会返回错误。如果未指定，可选变量将自动从 url 中删除自己（以及任何尾随斜杠）。

API 在搜索之外还有许多其他用途，设置最短请求时间，将加载状态附加到元素，允许将 html 元数据作为参数传递等等。但这些超出了问题的范围。

带有搜索组件。如果未指定，它将默认使用搜索 API 操作。

此操作需要一个包含{$query} 的网址，查询参数应映射到该网址。

在您的示例中，您可以全局设置默认搜索端点：

例如，如果您希望它通过 GET 传递，您可以使用

$.api.settings.api.search = 'search/?q={$query}'

或者您可以为模块指定自定义 API 设置 $('.ui.search').search({ apiSettings: { url: '/search/{$query}' } });