easyUI基础-searchbox搜索框

搜索框提示用户需要输入搜索的值。它可以结合一个菜单，允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。

使用方式

1、使用标签创建。对input标签引用'easyui-searchbox'类。

<script type="text/javascript">  
        //当用户点击搜索时执行的函数
        function doSearch(value,name){   
            alert(value+":"+name)   
        }   
    </script>  
      
    <input id="ss" class="easyui-searchbox" style="width:300px"  
            data-options="searcher:doSearch,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> 

2、使用js脚本创建:   

 <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:functionvalue,name){   
            alert(value + "," + name)   
        },   
        menu:'#mm',   
        prompt:'Please Input Value'  
    });  

属性

名称	类型	描述	默认值
width	number	组件的宽度。	auto
height	number	组件的高度。该属性自版本 1.3.2 起可用。	22
prompt	string	显示在输入框里的提示信息。	''
value	string	输入的值。	''
menu	selector	搜索类型的菜单。每个菜单项可以有下列的属性： 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

方法

名称	参数	描述
options	none	返回选项（options）对象。
menu	none	返回搜索类型的菜单对象。 下面的实例演示如何改变菜单项图标。   var m = $('#ss').searchbox('menu'); // get the menu object var item = m.menu('findItem', 'Sports News'); // find the menu item // change the menu item icon m.menu('setIcon', { target: item.target, iconCls: 'icon-save' }); // select the searching type name $('#ss').searchbox('selectName', 'sports');
textbox	none	返回文本框对象。
getValue	none	返回当前的搜索值。
setValue	value	设置新的搜索值。
getName	none	返回当前的搜索类型名称。
selectName	name	选择当前的搜索类型名称。 代码实例：   $('#ss').searchbox('selectName', 'sports');
destroy	none	销毁该组件。
resize	width	重设组件的宽度。