受够了EasyUI的封闭，Bootstrap虽然华丽但是功能太渣，闲着无聊写个下拉控件玩玩吧，不喜勿喷哈...
第一步：先设计下我的下拉控件的样子
1.既然是bootstrap风格的，我想应该是这样的
2.但是我想它应当可以输入，这样就可以支持模糊搜索,所以它应该是这样的
看样子还行。
第二步、代码实现
1.样式引入
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/themes/ls/jquery-ui.css" rel="stylesheet" />
2.js引入
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
3.自定义样式
/*Combox*/
.ui-autocomplete {
max-height: 130px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
} .ui-menu {
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
} .lsCombo-panel {
min-height: 30px;
max-height: 130px;
background: #fff;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
border: 1px solid #ddd;
} .ls-combo-panel {
background: #fff;
height: 200px;
padding: 3px 12px;
overflow-y: auto;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
z-index:;
} .ls-combo-panel .ls-combo-checkbox {
padding-left: 5px;
} .ls-combo-panel .ls-combo-checkbox li {
list-style: none;
padding-left:;
}
3.关键js代码
(function ($) {
$.ls = $.ls || {};
$.extend($.ls, {
isNullOrEmpty: function (v) {
return v == '' || v == undefined || v == null || typeof (v) == "undefined";
});
$.fn.extend({
lsCombox: function (parm, parm1, parm2) {
var defaults = {
remote: false,
url: '',
data: [],
valueField: 'value',
labelField: 'label',
onSelected: function (item) {
console.log(item);
}
};
var $combo = $(this);
var combId = $combo.attr('Id'),
hidId = combId + '_hid',
methods = {
getValue: function () {
return $("#" + hidId).val();
},
setValue: function (val) {
for (var i = 0, len = settings.data.length; i < len; i++) {
var d = settings.data[i];
if (d[settings.valueField] == val) {
$combo.val(d[settings.labelField]);
$("#" + hidId).val(d[settings.valueField]);
}
}
}
};
if (typeof (parm) === "string") {
return methods[parm](parm1, parm2);
}
var settings = $.extend({}, defaults, parm);
var btnBox = $('<span class="input-group-btn"></span>');
var btn = $('<button class="btn btn-default" type="button"><span class="caret"></span></button>')
.appendTo(btnBox)
.on('click', function () {
$combo.trigger("focus");
$combo.autocomplete("search", "");
})
var hidInput = $("<input type='hidden' id='" + hidId + "' />");
$combo.wrap("<div class='input-group'></div>")
.after(btnBox)
.after(hidInput);
$combo.autocomplete({
source: settings.data,
delay: 0,
minLength: 0,
position: { my: "right top", at: "right bottom" },
focus: function (event, ui) {
$combo.val(ui.item.label);
return false;
},
select: function (event, ui) {
$combo.val(ui.item.label);
hidInput.val(ui.item.value);
settings.onSelected(ui.item);
return false;
},
change: function (event, ui) {
//console.log(ui);
if ($.ls.isNullOrEmpty(ui.item))
hidInput.val("");
}
})
.autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>")
.append("<div>" + item.label + "</div>")
.appendTo(ul);
};
//获取选中的值
this.getValue = function () {
return methods.getValue();
};
//设置选中
this.setValue = function (value) {
methods.setValue(value);
};
//初始化赋值
if (!$.ls.isNullOrEmpty($combo.val())) {
this.setValue($combo.val());
}
}
});
})(jQuery)
3.看下效果
4.使用
/*初始化数据*/
var page = {
Data :eval('('+'[{"label":"选项1","value":"16082718544406680","Id":"16082718544406680"},{"label":"选项2","value":"16083018573800680","Id":"16083018573800680"},{"label":"选项3","value":"16090410022900180","Id":"16090410022900180"},{"label":"选项4","value":"16090410024603660","Id":"16090410024603660"},{"label":"选项5","value":"16090410030206420","Id":"16090410030206420"}]'+')')
};
//初始化
$("#combo").lsCombox({ data: page.Data });
//赋值
$("#combo").lsCombox('setValue','1');
//取值
$("#combo").lsCombox('getValue');
<!--HTML-->
<input id="combo" placeholder="请选择" type="text" />
转载请注明出处：http://www.cnblogs.com/xinwang/p/6008629.html