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 重写默认值对象。