语义UI中的搜索模块

Question

有没有人举过使用语义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”的一部分看到了，我还需要添加什么才能正确地进行连接？

有任何想法吗？

Answer 1

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

正因为如此，我改变了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] }

就是这样，它对我有用。

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

URL模板使用字符串模板对URL的可变部分进行工作。

• 您可以使用首选项{$ variable}或{variable}指定必需的参数。
• 您可以使用{/ $ variable}或{/ variable}指定可选参数。

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

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

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

此操作要求URL包含查询参数应映射到的{$query} 。

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

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

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

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