溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
通過如下代碼就可以簡單實現select帶模糊查詢的條件查詢，具體如下jquery.select.js如下：
(function($) {
$.selectSuggest = function(target, data, itemSelectFunction) {
var defaulOption = {
suggestMaxHeight: '200px',//彈出框最大高度
itemColor : '#000000',//默認字體顏色
itemBackgroundColor:'RGB(199,237,204)',//默認背景顏色
itemOverColor : '#ffffff',//選中字體顏色
itemOverBackgroundColor : '#C9302C',//選中背景顏色
itemPadding : 3 ,//item間距
fontSize : 12 ,//默認字體大小
alwaysShowALL : true //點擊input是否展示所有可選項
};
var maxFontNumber = 0;//最大字數
var currentItem;
var suggestContainerId = target + "-suggest";
var suggestContainerWidth = $('#' + target).innerWidth();
var suggestContainerLeft = $('#' + target).offset().left;
var suggestContainerTop = $('#' + target).offset().top + $('#' + target).outerHeight();
var showClickTextFunction = function() {
$('#' + target).val(this.innerText);
currentItem = null;
$('#' + suggestContainerId).hide();
}
var suggestContainer;
if ($('#' + suggestContainerId)[0]) {
suggestContainer = $('#' + suggestContainerId);
suggestContainer.empty();
} else {
suggestContainer = $('<div></div>'); //創建一個子<div>
}
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 = $('<div></div>'); //創建一個子<div>
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如下：
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<title>select.suggest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.select.js"></script>
</head>
<body>
<h2>Hello, world!</h2>
<div>
<div>
<div>.col-md-1
</div>
<div >
<input id="testInput" type="text" />
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
</body>
<script type="text/javascript">
var datas =[{"id":"2","text":"中國石油"},
{"id":"4","text":"中國建筑"},
{"id":"3","text":"中國移動"},
{"id":"5","text":"中國工商銀行"},
{"id":"7","text":"中國鐵建"},
{"id":"8","text":"上海汽車集團"},
{"id":"9","text":"中國建設銀行"},
{"id":"10","text":"聯想集團"}];
var itemSelectFuntion = function(){
alert(this.id + "," + this.innerHTML);
};
$.selectSuggest('testInput',datas,itemSelectFuntion);
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
