2

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

一个问题说会有文档，这里是模块

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

有任何想法吗？

4

2 回答 2

4

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

正因为如此，我改变results了 for cities，titleforname和descriptionto 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

并使用Rablgem 格式化 json 文件的输出：

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

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

就是这样，它对我有用。

于 2015-10-04T19:01:29.490 回答
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 操作。

此操作需要一个 url 来包含{$query}查询参数应映射到的位置。

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

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

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

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

于 2014-05-06T17:57:22.410 回答