easyUI SearchBox
@author YHC
覆盖默认值$.fn.searchbox.defaults.
searchbox 提示用户输入查询值,可以关联一个menu允许用户选择不同的查询种类,当用户输入ENTER (回车)或者是点击在组件右边的查询按钮将执行查询动作.
相关依赖
- menubutton
使用示例
创建 SearchBox
从标记创建.记得添加' easyui-searchbox'样式到input标记.
<script type="text/javascript">
function qq(value,name){
alert(value+":"+name)
}
</script>
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
通过编程的方法创建
<input id="ss"></input>
<div id="mm" style="width:120px">
<div data-options="name:'all',iconCls:'icon-ok'">All News</div>
<div data-options="name:'sports'">Sports News</div>
</div>
$('#ss').searchbox({
searcher:function(value,name){
alert(value + "," + name)
},
menu:'#mm',
prompt:'Please Input Value'
});
属性
| Name | Type | Description | Default |
|---|---|---|---|
| width | number | 设置组件宽度. | auto |
| prompt | string | 显示在input文本框的提示信息. | '' |
| value | string | 输入值. | '' |
| menu | selector | 查询类型菜单.每一个菜单(menu)都有下列属性: name: 查询类型名. selected: 当前选中查询名. 下面示例展示如何定义一个选中查询类型名. <input class="easyui-searchbox" style="width:300px" data-options="menu:'#mm'" /> <div id="mm" style="width:150px"> <div data-options="name:'item1'">Search Item1</div> <div data-options="name:'item2',selected:true">Search Item2</div> <div data-options="name:'item3'">Search Item3</div> </div> |
null |
| searcher | function(value,name) | 当用户按下查询按钮和按下ENTER(回车)键的时候searcher 函数将被调用. | null |
Methods
| Name | Parameter | Description |
|---|---|---|
| options | none | 返回options对象. |
| menu | none | 返回查询类型菜单对象.以下示例展示如何改变菜单项icon. var m = $('#ss').searchbox('menu'); // 得到menu对象
var item = m.menu('findItem', 'Sports News'); // 查找菜单项
//改变菜单项icon
m.menu('setIcon', {
target: item.target,
iconCls: 'icon-save'
});
//选中查询类型名
$('#ss').searchbox('selectName', 'sports');
|
| textbox | none | 返回文本框对象. |
| getValue | none | 返回当前查询值. |
| setValue | value | 设置一个新的查询值. |
| getName | none | 返回当前查询类型名. |
| selectName | name | 选中当前查询类型名. 示例代码: $('#ss').searchbox('selectName', 'sports');
|
| destroy | none | 销毁这个组件. |
| resize | width | 重置组件宽度. |
以上如有错误信息,请指出,thanks!