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!