怎麼樣使用jQuery實現select模糊查詢功能?

ADVERTISEMENT

怎麼樣使用jQuery實現select模糊查詢功能?

通過如下代碼就可以簡單實現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();

ADVERTISEMENT

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);

}

ADVERTISEMENT

}

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() );

$('#' + target).bind("blur",

function() {

if(!$('#' + suggestContainerId).is(":focus")){

$('#' + suggestContainerId).hide();

if (currentItem)

currentItem = null;

return;

}

});

$('#' + target).bind("click",

function() {

if (defaulOption.alwaysShowALL) else

$('#' + suggestContainerId).removeAttr("style");

var tempWidth = defaulOption.fontSize*maxFontNumber + 2 * defaulOption.itemPadding + 30;

var containerWidth = Math.max(tempWidth, suggestContainerWidth);

var h = this.scrollHeight;

ADVERTISEMENT

$('#' + 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>

<h1>Hello, world!</h1>

<div>

<div>

<div>.col-md-1

</div>

<div style="">

<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 =[];

var itemSelectFuntion = function(){

alert(this.id + "," + this.innerHTML);

};

$.selectSuggest('testInput',datas,itemSelectFuntion);

</script>

</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持路飯。

本文地址:

ADVERTISEMENT