jQuery实现select模糊查询(反射机制)

前端之家收集整理的这篇文章主要介绍了jQuery实现select模糊查询(反射机制)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

通过如下代码就可以简单实现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 = $('
'); //创建一个子
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如下:

select.suggest <Meta name="viewport" content="width=device-width,initial-scale=1.0">

Hello,world!

.col-md-1

猜你在找的jQuery相关文章