# 加载方式 ## Class加载 ``` <input id="ss" class="easyui-searchbox" style="width:300px" data-options="prompt:'Please Input Value',menu:'#box'"> </input> <div id="box" style="width:120px"> <div data-options="name:'all',iconCls:'icon-ok'">所有新闻</div> <div data-options="name:'sports'">鳀鱼新闻</div> </div> ``` ## JS调用加载 ``` <input id="ss" /> </input> <div id="box" style="width:120px"> <div data-options="name:'all',iconCls:'icon-ok'">All News</div> <div data-options="name:'sports'">Sports News</div> </div> <script> $(function () { $('#ss').searchbox({ // 组件宽度 width : 500, // 组件高度 height: 30, // 输入的值 value : 'spord', // 在用户按下搜索按钮或回车键的时候调用 searcher 函数 searcher : function (value, name) { alert(value + ',' + name); }, // 搜索类型菜单 menu : '#box', // 在输入框中显示提示消息。 prompt : '请输入内容', // 是否禁用搜索框 disabled: false }); }); </script> ``` # 属性列表 | 属性名 | 值 | 说明 | | --- | --- | | width | number | 组件宽度。默认为 auto。| | height | number | 组件高度。默认为22。| | prompt | string | 在输入框中显示提示消息。| | value | string | 输入的值。| | menu | selector | 搜索类型菜单。每个菜单项都具备一下属性：name：搜索类型名称。selected：自定义默认选中的搜索类型名称。 默认值为 null。| | searcher | Function(value,name) | 在用户按下搜索按钮或回车键的时候调用 searcher 函数。默认值为 null。| | disabled | boolean | 是否禁用搜索框。默认为 false。| # 方法列表 | 方法名 | 传参 | 说明 | | --- | --- | | options | none | 返回属性对象。 | | menu | none | 返回搜索类型菜单对象。| | textbox | none | 返回文本框对象。| | getValue | none | 返回当前搜索值。| | setValue | value | 设置一个新的搜索值。| | getName| none | 返回当前搜索类型名。| | selectName | name | 选择当前搜索类型名。| | destroy | none | 销毁该控件。| | resize | width | 重置组件宽度。| | disable | none | 禁用组件。| | enable | none | 启用组件。| | clear | none | 清理搜索框内容。| | reset | none| 重置搜索框内容。| *** ``` //返回属性对象 console.log($('#ss').searchbox('options')); //返回文本框对象 console.log($('#ss').searchbox('textbox')); //返回当前索引值 console.log($('#ss').searchbox('getValue')); //改变当前索引值 $('#ss').searchbox('setValue','改变值') //选择指定的搜索类型 $('#ss').searchbox('selectName', 'sports'); //返回当前索引类型值 console.log($('#ss').searchbox('getName')); //重置搜索框宽度 $('#ss').searchbox('resize', 200); //销毁搜索框 $('#ss').searchbox('destroy'); //禁用和启用 $('#ss').searchbox('disable'); $('#ss').searchbox('enable'); //清理搜索框内容 $('#ss').searchbox('clear'); //重置搜索框内容 $(document).dblclick(function () { $('#ss').searchbox('reset'); }); //返回类型名对象 var m = $('#ss').searchbox('menu'); var item = m.menu('findItem', '体育'); m.menu('setIcon', { target: item.target, iconCls: 'icon-save' }); //可以使用$.fn.searchbox.defaults 重写默认值对象。 ```