Show:

bui.searchbar Class

Defined in: src/scripts/ui/bui.searchbar.js:9
Module: UI

搜索条

输入时会延迟执行.示例是 searchbar 跟 list 一起使用的场景.

预览地址: demo

方法说明:

search: 单独调用搜索方法
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.searchbar

(
  • option
)

Defined in src/scripts/ui/bui.searchbar.js:9

Parameters:

  • option Object
    • id String

      控件id

    • [uid] String optional

      1.6.6新增，实例的自定义唯一名字，用于命令式调用

    • [handle] String optional

      点击的搜索按钮

    • [readonly] Boolean optional

      1.6.7 是否只读

    • [placeholder] String optional

      1.6.7 占位的字符

    • [onInput] Function optional

      实时搜索的回调

    • [onChange] Function optional

      1.5.4新增, 搜索改变的时候触发,在失去焦点后

    • [onRemove] Function optional

      移除关键词以后的回调

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [callback] Function optional

      点击按钮的回调

Example:

html:

       <div id="searchbar" class="bui-searchbar">
                                               <div class="bui-input">
                                                   <i class="icon-search"></i>
                                                   <input type="text" value="" placeholder="搜索"/>
                                               </div>
                                           </div>

js:

       // 初始化
                                           var uiSearchbar = bui.searchbar({ 
                                               id: "#searchbar",
                                               callback: function(e,keyword) {
                                                   // 点击以后做什么事情
                                               }
                                             });

Methods

destroy

(
  • [bool]
)

Defined in src/scripts/ui/bui.searchbar.js:354

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

    默认: false 销毁部分 | true 销毁全部

Example:

       //销毁
                                                       uiSearchbar.destroy();

init

(
  • [option]
)
chainable

Defined in src/scripts/ui/bui.searchbar.js:113

初始化方法,用于重新初始化结构,事件只初始化一次

Parameters:

  • [option] Object optional

    参数控件本身

option

(
  • [key]
  • [value]
)
chainable

Defined in src/scripts/ui/bui.searchbar.js:394

获取设置参数

Parameters:

  • [key] String | object optional

    不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数

  • [value] String | number | boolean | function optional

    设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传

Example:

       //获取所有参数
                                                       var option = uiSearchbar.option();
                                                
                                                       //获取某个参数
                                                       var id = uiSearchbar.option( "id" );
                                                
                                                       //修改一个参数
                                                       uiSearchbar.option( "handle",".btn-search" );
                                                
                                                       //修改多个参数
                                                       uiSearchbar.option( {"handle":".btn-search"} );

placeholder

(
  • [word]
)

Defined in src/scripts/ui/bui.searchbar.js:279

Available since 1.6.7

修改占位符

Parameters:

  • [word] String optional

    占位符

Example:

       uiSearchbar.placeholder("请输入关键词");

readonly

(
  • [bool]
)

Defined in src/scripts/ui/bui.searchbar.js:296

Available since 1.6.7

只读，禁止输入

Parameters:

  • [bool] Boolean optional

    true 禁止输入 false 允许输入

Example:

       // 禁止输入
                                                       uiSearchbar.readonly(true);
                                                       // 允许输入
                                                       uiSearchbar.readonly(false);

reset

(
  • [name]
)

Defined in src/scripts/ui/bui.searchbar.js:338

Available since 1.5.4

清空当前输入框的值

Parameters:

  • [name] String optional

    依赖控件名

Example:

      uiSearchbar.reset();

value

(
  • [name]
)

Defined in src/scripts/ui/bui.searchbar.js:317

Available since 1.5.3

获取当前输入框的值

Parameters:

  • [name] String optional

    依赖控件名

Example:

      var val = uiSearchbar.value();

widget

(
  • [name]
)

Defined in src/scripts/ui/bui.searchbar.js:379

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

       //获取依赖控件
                                                       var uiSearchbarWidget = uiSearchbar.widget();

Events

off

Defined in src/scripts/ui/bui.searchbar.js:442

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "search"(搜索时触发) | "remove"(移除关键字时触发) | "input"(每次输入时触发)

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiSearchbar.off("show");

on

Defined in src/scripts/ui/bui.searchbar.js:422

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "search"(搜索时触发) | "remove"(移除关键字时触发) | "input"(每次输入时触发)

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiSearchbar.on("show",function () {
                                                           // 点击的菜单
                                                           console.log(this);
                                                       });