jquery-editableSelect实现二级联动的模糊查询

首先，引入js和css文件（依赖jquery）

  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jquery.editable-select.min.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.editable-select.min.js"></script>

加载品名

<td><span>品名：</span>
                                                <select id="pinming" name="pinming" class="gggselect">
                                                    <option value="">   </option>
                                                    <c:forEach items="${allGoodsName}" var="gn">
                                                        <option data-id="${gn.id}" value="${gn.name}">${gn.name}</option>
                                                    </c:forEach>
                                                </select></td>
                                        </tr>

加载规格

<td><span>规&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：</span>
                                                <select id="guige" name="guige" class="gggselect">
                                                    <option value="">   </option>
                                                    <c:forEach items="${specList}" var="spec">
                                                        <option data-id="${spec.goodNameId}" value="${spec.name}">${spec.name}</option>
                                                    </c:forEach>
                                                </select></td>

指定带模糊查询的元素

$('#pinming').editableSelect({
        effects: 'slide',
        onShow:function (b,d) {
            return b.find("li");
        },
        onHide:function (b,d) {
            if ($("#pinming").val()==""){
                $("li.selected").removeClass("selected");
                $("#pinming").attr("data-id","");

                var toShowb = b.find("li");
                toShowb.css('visibility', 'visible')
                toShowb.css('display', 'block');
            }
        }
    });

$('#guige').editableSelect({
        effects: 'slide',
        onShow:function (b,d) {
            return filter(b);
        },
        onHide:function (b,d) {
            var allB=b.find("li");
            allB.css('visibility','visible');
            allB.css('display','block');
        }
    });
    function filter(b) {
        if ($("#pinming").attr("data-id")=="")
            return b.find("li");
        var allB = b.find("li");
        allB.css('visibility', 'hidden');
        allB.css('display', 'none');

        var toShowb = b.find("li[data-id='" + $("#pinming").attr("data-id") + "']");

        toShowb.css('visibility', 'visible')
        toShowb.css('display', 'block');
        return toShowb;
    }

修改jeditable的js源码

({
            init: function () {
                var f = this;
                f.copyAttributes(g, d);
                d.addClass("es-input");
                c(document.body).append(b);
                g.find("option").each(function () {
                    var a = c("<li>");
                    a.html(c(this).text());
                    f.copyAttributes(this, a);
                    b.append(a);
                    c(this).attr("selected") && d.val(c(this).text()) && d.attr("data-id",c(this).attr("data-id"));
                });
                d.on("focus input click", f.show);
                c(document).click(function (a) {
                    c(a.target).is(d) || c(a.target).is(b) || f.hide()
                });
                f.initializeList();
                f.initializeEvents();
                a.onCreate && a.onCreate.call(this,
                    d)
            }

其中d.attr("data-id",c(this).attr("data-id"));是给标签元素属性赋值，可以根据自己的需求在这里添加，灵活赋值

修改setFiled方法：
setField: function (b) {
                if (!c(this).is("li:visible"))return !1;
                d.val(c(this).text());
                d.attr("data-id",c(this).attr("data-id"))
                b.hide();
                a.onSelect && a.onSelect.call(d, c(this))
            }


修改show方法
show: function () {
                    var hh;
                if(a.onShow) {hh=a.onShow.call(this,b,d).parent("ul");}
                else {
                    hh=b.find("li");
                }

                hh.css({top: d.offset().top + d.outerHeight() - 1, left: d.offset().left, width: d.innerWidth()});
                if ((a.filter ? hh.find("li:nic(" + d.val() + ")").hide().size() : 0) == hh.find("li").size()) hh.hide();
                else switch (a.effects) {
                    case "fade":
                        hh.fadeIn(a.duration);
                        break;
                    case "slide":
                        hh.slideDown(a.duration);
                        break;
                    default:
                        hh.show(a.duration)
                }

修改后的完整js：

(function (c) {
    c.extend(c.expr[":"], {
        nic: function (a, c, d, b) {
            return !(0 <= (a.textContent || a.innerText || "").toLowerCase().indexOf((d[3] || "").toLowerCase()))
        }
    });
    c.fn.editableSelect = function (a) {
        var g = this.clone(), d = c('<input type="text">'), b = c('<ul class="es-list">');
        a = c.extend({}, {
            filter: !0,
            effect: "default",
            duration: "fast",
            onCreate: null,
            onShow: null,
            onHide: null,
            onSelect: null
        }, a);
        switch (a.effects) {
            case "default":
            case "fade":
            case "slide":
                break;
            default:
                a.effects = "default"
        }
        isNaN(a.duration) && "fast" == a.duration &&
        "slow" == a.duration && (a.duration = "fast");
        this.replaceWith(d);
        ({
            init: function () {
                var f = this;
                f.copyAttributes(g, d);
                d.addClass("es-input");
                c(document.body).append(b);
                g.find("option").each(function () {
                    var a = c("<li>");
                    a.html(c(this).text());
                    f.copyAttributes(this, a);
                    b.append(a);
                    c(this).attr("selected") && d.val(c(this).text()) && d.attr("data-id",c(this).attr("data-id"));
                });
                d.on("focus input click", f.show);
                c(document).click(function (a) {
                    c(a.target).is(d) || c(a.target).is(b) || f.hide()
                });
                f.initializeList();
                f.initializeEvents();
                a.onCreate && a.onCreate.call(this,
                    d)
            }, initializeList: function () {
                var a = this;
                b.find("li").each(function () {
                    c(this).on("mousemove", function () {
                        b.find(".selected").removeClass("selected");
                        c(this).addClass("selected")
                    });
                    c(this).click(function () {
                        a.setField.call(this, a)
                    })
                });
                b.mouseenter(function () {
                    b.find("li.selected").removeClass("selected")
                })
            }, initializeEvents: function () {
                var a = this;
                d.bind("input keydown", function (c) {
                    switch (c.keyCode) {
                        case 40:
                            a.show();
                            c = b.find("li:visible");
                            var e = c.filter("li.selected");
                            b.find(".selected").removeClass("selected");
                            e = c.eq(0 < e.size() ? c.index(e) + 1 : 0);
                            e = (0 < e.size() ? e : b.find("li:visible:first")).addClass("selected");
                            a.scroll(e, !0);
                            break;
                        case 38:
                            a.show();
                            c = b.find("li:visible");
                            e = c.filter("li.selected");
                            b.find("li.selected").removeClass("selected");
                            e = c.eq(0 < e.size() ? c.index(e) - 1 : -1);
                            (0 < e.size() ? e : b.find("li:visible:last")).addClass("selected");
                            a.scroll(e, !1);
                            break;
                        case 9:
                        case 27:
                            a.hide();
                            break;
                        case 13:
                            a.show();
                            c = b.find("li:visible");
                            if (c.size() == 1) {
                                $(d).val($(c[0]).text());
                                a.hide()
                            }
                    }
                })
            }, show: function () {
                    var hh;
                if(a.onShow) {hh=a.onShow.call(this,b,d).parent("ul");}
                else {
                    hh=b.find("li");
                }

                hh.css({top: d.offset().top + d.outerHeight() - 1, left: d.offset().left, width: d.innerWidth()});
                if ((a.filter ? hh.find("li:nic(" + d.val() + ")").hide().size() : 0) == hh.find("li").size()) hh.hide();
                else switch (a.effects) {
                    case "fade":
                        hh.fadeIn(a.duration);
                        break;
                    case "slide":
                        hh.slideDown(a.duration);
                        break;
                    default:
                        hh.show(a.duration)
                }
                // b.find("li").show();
                // b.css({top: d.offset().top + d.outerHeight() - 1, left: d.offset().left, width: d.innerWidth()});
                // if ((a.filter ? b.find("li:nic(" + d.val() + ")").hide().size() : 0) == b.find("li").size()) b.hide();
                // else switch (a.effects) {
                //     case "fade":
                //         b.fadeIn(a.duration);
                //         break;
                //     case "slide":
                //         b.slideDown(a.duration);
                //         break;
                //     default:
                //         b.show(a.duration)
                // }

            }, hide: function () {
                switch (a.effects) {
                    case "fade":
                        b.fadeOut(a.duration);
                        break;
                    case "slide":
                        b.slideUp(a.duration);
                        break;
                    default:
                        b.hide(a.duration)
                }
                a.onHide && a.onHide.call(this,b,
                    d)
            }, scroll: function (a, d) {
                var e = 0, h = b.find("li:visible").index(a);
                b.find("li:visible").each(function (a, b) {
                    a < h && (e += c(b).outerHeight())
                });
                if (e + a.outerHeight() >= b.scrollTop() + b.outerHeight() || e <= b.scrollTop()) d ? b.scrollTop(e + a.outerHeight() - b.outerHeight()) : b.scrollTop(e)
            }, copyAttributes: function (a, b) {
                var e = c(a)[0].attributes, d;
                for (d in e)c(b).attr(e[d].nodeName, e[d].nodeValue)
            }, setField: function (b) {
                if (!c(this).is("li:visible"))return !1;
                d.val(c(this).text());
                d.attr("data-id",c(this).attr("data-id"))
                b.hide();
                a.onSelect && a.onSelect.call(d, c(this))
            }
        }).init();
        return d
    }
})(jQuery);