搜索

轻松创建美观的搜索框。

用法

搜索组件由一个搜索表单和搜索字段本身组成。

类	描述
`.uk-search`	将此 class 添加到 `<form>` 元素以定义搜索组件。
`.uk-search-field`	将此 class 添加到 `<input>` 元素以创建搜索字段。

要启用搜索所需的 JavaScript，只需添加 data-uk-search 属性。

示例

标记

<form class="uk-search" data-uk-search>
    <input class="uk-search-field" type="search" placeholder="">
</form>

JSON 搜索结果

只需将 {source:'PATH/TO/RESULTS'} 添加到 data 属性，并设置搜索结果的路径，该路径需要以 JSON 格式（示例）。您可以使用下拉组件中的下拉菜单来显示搜索结果。为了显示搜索结果，会注入下拉组件的下拉菜单。您甚至可以使用键盘的上下键在下拉菜单中导航。

重要搜索需要自动完成组件才能工作。请确保始终将它们一起包含。

示例

标记

<form class="uk-search" data-uk-search="{source:'my-results.json'}">

    <input class="uk-search-field" type="search" placeholder="">

    <!-- This is the dropdown, which is injected through JavaScript -->
    <div class="uk-dropdown uk-dropdown-search">
        <ul class="uk-nav uk-nav-search">...</ul>
    </div>

</form>

导航栏中的搜索

搜索可以在导航栏组件中的导航栏内使用。

示例

标记

<nav class="uk-navbar">
    <div class="uk-navbar-flip">
        <div class="uk-navbar-content">
            <form class="uk-search" data-uk-search="{source:'my-results.json'}">
            ...
            </form>
        </div>
    </div>
</nav>

侧边栏中的搜索

搜索也可以放置在侧边栏中。

示例

标记

<!-- This is the button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <form class="uk-search">
        ...
        </form>
    </div>
</div>

JavaScript 选项

选项	可能的值	默认值	描述
`source`	字符串	''	数据源 URL
`minLength`	整数	3	触发自动完成的最小输入长度
`param`	字符串	search	发送 ajax 请求时的查询名称
`delay`	整数	300	停止输入后的延迟时间

手动初始化元素

var search = UIkit.search(element, { /* options */ });

事件

与自动完成组件相同。