# 加載方式 ## 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 重寫默認值對象。 ```