通过如下代码就可以简单实现select带模糊查询的条件查询，具体如下jquery.select.js如下：
'); //创建一个子
}
suggestContainer.attr('id',suggestContainerId);
suggestContainer.attr('tabindex','0');
suggestContainer.hide();
var _initItems = function(items) {
suggestContainer.empty();
var itemHight=0;
for (var i = 0; i < items.length; i++) {
if(items[i].text.length > maxFontNumber){
maxFontNumber = items[i].text.length;
}
var suggestItem = $(''); //创建一个子
select.suggest
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
suggestItem.attr('id',items[i].id);
suggestItem.append(items[i].text);
suggestItem.css({
'padding':defaulOption.itemPadding + 'px','white-space':'nowrap','cursor': 'pointer','background-color': defaulOption.itemBackgroundColor,'color': defaulOption.itemColor
});
suggestItem.bind("mouSEOver",function() {
$(this).css({
'background-color': defaulOption.itemOverBackgroundColor,'color': defaulOption.itemOverColor
});
currentItem = $(this);
});
suggestItem.bind("mouSEOut",function() {
$(this).css({
'background-color': defaulOption.itemBackgroundColor,'color': defaulOption.itemColor
});
currentItem = null;
});
suggestItem.bind("click",showClickTextFunction);
suggestItem.bind("click",itemSelectFunction);
suggestItem.appendTo(suggestContainer);
suggestContainer.appendTo(document.body);
}
}
var inputChange = function() {
var inputValue = $('#' + target).val();
inputValue = inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");
var matcher = new RegExp(inputValue,"i");
return $.grep(data,function(value) {
return matcher.test(value.text);
});
}
$('#' + target).bind("keyup",function() {
_initItems(inputChange());
});
$('#' + target).bind("blur",function() {
if(!$('#' + suggestContainerId).is(":focus")){
$('#' + suggestContainerId).hide();
if (currentItem) {
currentItem.trigger("click");
}
currentItem = null;
return;
}
});
$('#' + target).bind("click",function() {
if (defaulOption.alwaysShowALL) {
_initItems(data);
} else {
_initItems(inputChange());
}
$('#' + suggestContainerId).removeAttr("style");
var tempWidth = defaulOption.fontSize*maxFontNumber + 2 * defaulOption.itemPadding + 30;
var containerWidth = Math.max(tempWidth,suggestContainerWidth);
var h = this.scrollHeight;
$('#' + suggestContainerId).css({
'border': '1px solid #ccc','max-height': '100px','top': suggestContainerTop,'left': suggestContainerLeft,'width': containerWidth,'position': 'absolute','font-size': defaulOption.fontSize+'px','font-family':'Arial','z-index': 99999,'background-color': '#FFFFFF','overflow-y': 'auto','overflow-x': 'hidden','white-space':'nowrap'
});
$('#' + suggestContainerId).show();
});
_initItems(data);
$('#' + suggestContainerId).bind("blur",function() {
$('#' + suggestContainerId).hide();
});
}
})(jQuery);
html如下：
Hello,world!
.col-md-1
