SearchBox( 搜索框) 組件

一． 加載方式
//class 加載方式
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options="searcher:qq,prompt:'Please Input
Value',menu:'#box'"></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>

//JS 加載調用
$('#ss').searchbox({
searcher : function (value, name) {
alert(value + ',' + name);
},
menu : '#box',
prompt : '請輸入內容',
});

 

二．屬性列表

　　

//屬性設置
$('#ss').searchbox({
width : 300,
height : 30,
value : '固定內容',
searcher : function (value, name) {
alert(value + ',' + name);
},
menu : '#box',
prompt : '請輸入內容',
disabled : true,
});

 

三． 方法列表

//返回屬性對象
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'
});

 

PS：我們可以使用$.fn.searchbox.defaults 重寫默認值對象。