Jquery 文本域筛选下拉菜单，支持首字符筛选

sjk2lq

于 2023-05-12 16:22:52 发布

阅读量128

点赞数

分类专栏： Jquery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/sjk2lq/article/details/130644736

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

var lqSelect = function (inpId, selId, data) {

    var list = [];
    var sel = $("#" + selId);
    var inp = $("#" + inpId);
    
    if (data.length > 0) {
        list = data;
    }

    var initSel = function () {

        var currInx = 0;
        var isMouseenter = false;

        var initDiv = function () {
            var pinp = inp.parent();
            pinp.css("position", "relative");
            inp.attr("autocomplete", "off");
            var seldiv = pinp.find(".selectDiv");
            if (seldiv.length < 1) {
                pinp.append("<div class='selectDiv' style='width:0px; height:0px; position:absolute;background-color:#EEEEEE; z-index:10000;overflow-y:auto;display:none;'>" + "</div>");
                seldiv = pinp.find(".selectDiv");
                seldiv.mouseenter(function () {
                    isMouseenter = true;
                });
                seldiv.mouseleave(function () {
                    isMouseenter = false;
                });
            }
            return seldiv;
        }

        var showDiv = function () {
            var val = inp.val();
            var seldiv = initDiv();
            if (val == "") {
                seldiv.hide();
            } else {
                seldiv.width(inp.outerWidth(true));
                seldiv.height(200);
                seldiv.show();
                sort(val);
            }
        }

        var hideDiv = function () {
            var seldiv = initDiv();
            seldiv.hide();
        }

        var sort = function (val) {
            var seldiv = initDiv();
            seldiv.html("");
            for (var i = 0; i < list.length; i++) {
                if (list[i].Name.indexOf(val) > -1 || list[i].FirstLetter.indexOf(val.toUpperCase()) > -1) {
                    seldiv.append("<div data-name='" + list[i].Name + "' data-id='" + list[i].Id + "' style='float:left; width:90%; height:24px; line-height:24px;text-align:center;margin-left:5%; margin-right:5%;border-bottom:#ffffff 1px solid;cursor:pointer;'>" + list[i].Name + "</div>");
                }
            }
            if (seldiv.html() == "") {
                seldiv.html("<samp style='float:left; width:100%; height:24px; line-height:24px;text-align:center;color:#ff0000;'>无数据</samp>");
            } else {
                seldiv.find("div").click(function () {
                    var id = $(this).data("id");
                    var name = $(this).data("name");
                    sel.val(id);
                    inp.val(name);
                    hideDiv();
                });
            }
        }

        var enter = function () {
            var seldiv = initDiv();
            var opt = seldiv.find(".selname");
            if (opt.length > 0) {
                opt.click();
            }
        }

        var mobile = function (isup) {
            var seldiv = initDiv();
            var divs = seldiv.find("div");
            var len = divs.length;
            var opt = seldiv.find(".selname");
            if (opt.length > 0) {
                currInx = isup ? (currInx - 1) : (currInx + 1);
                if (currInx < 0) {
                    currInx = (len - 1);
                }
                if (currInx == len) {
                    currInx = 0;
                }
                divs.removeClass("selname").eq(currInx).addClass("selname");
                divs.css("border-bottom", "#ffffff 1px solid").eq(currInx).css("border-bottom", "#ff0000 1px solid");
                // 滚动条位置
                opt = seldiv.find(".selname");
                var ptop = opt.position().top;
                if (ptop <= 0) {
                    seldiv.scrollTop(seldiv.scrollTop() + ptop);
                } else {
                    var posHeight = ptop + opt.outerHeight();
                    if (posHeight > seldiv.height()) {
                        seldiv.scrollTop(seldiv.scrollTop() + posHeight - seldiv.height());
                    }
                }
            } else {
                currInx = isup ? (len - 1) : 0;
                divs.removeClass("selname").eq(currInx).addClass("selname");
                divs.css("border-bottom", "#ffffff 1px solid").eq(currInx).css("border-bottom", "#ff0000 1px solid");
                // 滚动条位置
                opt = seldiv.find(".selname");
                var ptop = opt.position().top;
                if (ptop <= 0) {
                    seldiv.scrollTop(seldiv.scrollTop() + ptop);
                } else {
                    var posHeight = ptop + opt.outerHeight();
                    if (posHeight > seldiv.height()) {
                        seldiv.scrollTop(seldiv.scrollTop() + posHeight - seldiv.height());
                    }
                }
            }
        }

        return {
            isMouseenter: function () { return isMouseenter; },
            showDiv: showDiv,
            hideDiv: hideDiv,
            mobile: mobile,
            enter: enter
        }
    }();

    inp.keyup(function (e) {
        if (e.keyCode == 38)//上
        {
            initSel.mobile(true);
        } else if (e.keyCode == 40)//下
        {
            initSel.mobile(false);
        } else if (e.keyCode == 13)//enter
        {
            initSel.enter();
        } else {
            sel.val(0);
            initSel.showDiv();
        }
    });

    inp.focus(function () {
        initSel.showDiv();
    });

    inp.blur(function () {
        if (sel.val() == 0) {
            if (!initSel.isMouseenter()) {
                //inp.val("");
                initSel.hideDiv();
            }
        } else {
            if (!initSel.isMouseenter()) {
                initSel.hideDiv();
            }
        }
    });

};

参数
inpId: 文本域Id, 输入筛选条件，显示选中结果
selId: 隐藏域Id，存在选中项Id数据
data: 下拉数据数组,如：[{Id:1,Name:'显示项',FirstLetter:'XSX'}]