记录-前端带搜索功能的选择空间

来源：互联网发布：在家里赚钱知乎编辑：程序博客网时间：2024/05/21 17:45
(function($) {$.getSelectorValue = function(target){return $('#xyt_selector_' + target).val();}    $.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();$(document.body).append("<input id='xyt_selector_"+target+"' type='hidden' values='-1'/>");        var showClickTextFunction = function() {            $('#' + target).val(this.innerText);$('#xyt_selector_' + target).val(this.id);            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();if(!items || items.length==0)return;            for (var i = 0; i < items.length; i++) {            if(items[i].text.length > maxFontNumber){            maxFontNumber = items[i].text.length;            }if(items[i].defaultValue==true){$('#xyt_selector_' + target).val(items[i].id);$('#'+target).val(items[i].text);items[i].defaultValue=false;}                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,'z-index':19891019                });                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();if(!inputValue){$('#xyt_selector_' + target).val("-1");return;}            inputValue = inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");            var matcher = new RegExp(inputValue, "i");            return $.grep(data,            function(value) {                return matcher.test(value.text);            });        }if (!!window.ActiveXObject || "ActiveXObject" in window){$('#' + target).bind("propertychange",function() {_initItems(inputChange());});}else{$('#' + target).bind("input",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);            $('#' + suggestContainerId).css({                'border': '1px solid #ccc',                'max-height': '200px',                '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);
使用方式
初始化数据
$.selectSuggest('inputId',[{id:1,text:'test1',defaultValue:true},{id:2,text:'test2'},{id:3,text:'test3'}]);
获得选中数据
$.getSelectorValue("inputId");
阅读全文
0 0