在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的搜索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（搜索）需要＆＃34;结果＆＃34;作为具有标题和描述的子项内容的根和节点，以及api指定的其他节点。因此，如果你有其他名称的json结果，那么你必须改变searc函数的方法调用。

因此，我更改了results的{​​{1}}，cities的{​​{1}}和title的{​​{1}}。

在我的控制器中，我刚刚发了这样一个查询：

name

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

description

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

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

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

Answer 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}'
  }

网址模板使用字符串模板化来处理网址的可变部分。

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

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

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

使用搜索组件。如果未指定，则默认使用搜索API操作。

此操作需要一个url，以包含{$query}，其中查询参数应映射到该$.api.settings.api.search = 'search/?q={$query}'。

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

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

$('.ui.search').search({ apiSettings: { url: '/search/{$query}' } });

或者您可以为模块指定自定义API设置 {{1}}