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

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

本文地址:
ADVERTISEMENT
ADVERTISEMENT