学步园

@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'  
});  

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

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');

$('#ss').searchbox('selectName', 'sports');


以上如有错误信息,请指出,thanks!