searchbox(搜索框) · easyUI

### SearchBox（搜索框）使用$.fn.searchbox.defaults重写默认值对象。搜索框提示用户需要输入搜索的值。它可以结合一个菜单，允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。 ![](https://box.kancloud.cn/2016-07-19_578d913469c73.png) #### #### 依赖关系 - [textbox](#) - [menubutton](#) #### #### 使用案例 ##### 创建查询框 1. 使用标签创建。添加'easyui-searchbox'类ID到<input/>标签。 1. <scripttype="text/javascript"> 1. function qq(value,name){ 1. alert(value+":"+name) 1. } 1. </script> 1. 1. <inputid="ss"class="easyui-searchbox"style="width:300px" 1. data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input> 1. 1. <divid="mm"style="width:120px"> 1. <divdata-options="name:'all',iconCls:'icon-ok'">All News</div> 1. <divdata-options="name:'sports'">Sports News</div> 1. </div> <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> 2. 创建程序。 1. <inputid="ss"></input> 1. <divid="mm"style="width:120px"> 1. <divdata-options="name:'all',iconCls:'icon-ok'">All News</div> 1. <divdata-options="name:'sports'">Sports News</div> 1. </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> 1. $('#ss').searchbox({ 1. searcher:function(value,name){ 1. alert(value + "," + name) 1. }, 1. menu:'#mm', 1. prompt:'请输入值' 1. }); $('#ss').searchbox({ searcher:function(value,name){ alert(value + "," + name) }, menu:'#mm', prompt:'Please Input Value' }); #### #### 属性 <table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>width</td> <td>number</td> <td>组件宽度。</td> <td>auto</td></tr><tr><td>height</td> <td>number</td> <td>组件高度。<strong><font color="#ff0000">（该属性自1.3.2版开始可用）</font></strong></td> <td>22</td></tr><tr><td>prompt</td> <td>string</td> <td>在输入框中显示提示消息。</td> <td>''</td></tr><tr><td>value</td> <td>string</td> <td>输入的值。</td> <td>''</td></tr><tr><td>menu</td> <td>selector</td> <td>搜索类型菜单。每个菜单项都具备一下属性：<br/>name：搜索类型名称。<br/>selected：自定义默认选中的搜索类型名称。 <p>如下示例定义了一个选择搜索类型名称的搜索框：</p><pre><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> </pre></td> <td>null</td></tr><tr><td>searcher</td> <td>function(value,name)</td> <td>在用户按下搜索按钮或回车键的时候调用searcher函数。</td> <td>null</td></tr><tr><td>disabled</td> <td>boolean</td> <td>定义是否禁用搜索框。<strong><font color="#ff0000">（该属性自1.3.6版开始可用）</font></strong></td> <td>false</td></tr></tbody></table> #### #### 方法 <table class="doc-table"><tbody><tr><th><strong>Name</strong></th> <th><strong>Parameter</strong></th> <th><strong>Description</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>menu</td> <td>none</td> <td>返回搜索类型菜单对象。下面的例子显示了更改菜单项图标。<pre>var m = $('#ss').searchbox('menu'); // 获取菜单项var item = m.menu('findItem', 'Sports News'); // 查找菜单项 // 更改菜单项图标 m.menu('setIcon', { target: item.target, iconCls: 'icon-save' }); // 选择搜索类型名 $('#ss').searchbox('selectName', 'sports'); </pre></td></tr><tr><td>textbox</td> <td>none</td> <td>返回文本框对象。</td></tr><tr><td>getValue</td> <td>none</td> <td>返回当前搜索值。</td></tr><tr><td>setValue</td> <td>value</td> <td>设置一个新的搜索值。</td></tr><tr><td>getName</td> <td>none</td> <td>返回当前搜索类型名。</td></tr><tr><td>selectName</td> <td>name</td> <td>选择当前搜索类型名。 <p>代码示例：</p><pre>$('#ss').searchbox('selectName', 'sports'); </pre></td></tr><tr><td>destroy</td> <td>none</td> <td>销毁该控件。</td></tr><tr><td>resize</td> <td>width</td> <td>重置组件宽度。</td></tr><tr><td>disable</td> <td>none</td> <td>禁用搜索框。<strong><font color="#ff0000">（该方法自1.3.6版开始可用）</font></strong></td></tr><tr><td>enable</td> <td>none</td> <td>启用搜索框。<strong><font color="#ff0000">（该方法自1.3.6版开始可用）</font></strong></td></tr><tr><td>clear</td> <td>none</td> <td>清除搜索框。<strong><font color="#ff0000">（该方法自1.3.6版开始可用）</font></strong></td></tr><tr><td>reset</td> <td>none</td> <td>重置搜索框。<strong><font color="#ff0000">（该方法自1.3.6版开始可用）</font></strong></td></tr></tbody></table>