快捷導(dǎo)航

Jquery Easyui搜索框組件SearchBox使用詳解（19）

更新時(shí)間：2016年12月17日 16:56:55 作者：Jsakura

這篇文章主要為大家詳細(xì)介紹了Jquery Easyui搜索框組件SearchBox的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Jquery Easyui搜索框組件的實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

加載方式

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調(diào)用加載

 <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',
    // 在用戶按下搜索按鈕或回車鍵的時(shí)候調(diào)用 searcher 函數(shù)
    searcher : function (value, name) {
     alert(value + ',' + name);
    },
    // 搜索類型菜單
    menu : '#box',
    // 在輸入框中顯示提示消息。
    prompt : '請輸入內(nèi)容',
    // 是否禁用搜索框
    disabled: false
   });
  });
 </script>

屬性列表

方法列表

   //返回屬性對象
   console.log($('#ss').searchbox('options'));
   //返回文本框?qū)ο?
   console.log($('#ss').searchbox('textbox'));
   //返回當(dāng)前索引值
   console.log($('#ss').searchbox('getValue'));
   //改變當(dāng)前索引值
   $('#ss').searchbox('setValue','改變值')
   //選擇指定的搜索類型
   $('#ss').searchbox('selectName', 'sports');
   //返回當(dāng)前索引類型值
   console.log($('#ss').searchbox('getName'));
   //重置搜索框?qū)挾?
   $('#ss').searchbox('resize', 200);
   //銷毀搜索框
   $('#ss').searchbox('destroy');
   //禁用和啟用
   $('#ss').searchbox('disable');
   $('#ss').searchbox('enable');
   //清理搜索框內(nèi)容
   $('#ss').searchbox('clear');
   //重置搜索框內(nèi)容
   $(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 重寫默認(rèn)值對象。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: