jQuery 自动完成从局部视图加载的结果

Question

我已经搜索过，不幸的是没有找到答案。 抱歉，如果这是重复的。 可以从部分加载自动完成的结果吗？

        $('#searchBox2').catcomplete({
            delay: 0,
            minLength: 1,
            source: '/api/CheckOrders/Search?searchString=' + inputData,
            select: function (event, ui) {

            }
        }).bind('focus', function () {
            $(this).keydown();
        });
    }

我已经在类别等中正确显示了结果，但是我想要的样式被 UI 样式覆盖并且变得有点混乱。 我想知道是否可以从部分加载结果，因为这可以让我更轻松地设置结果的样式。 下面显示的是当前结果的显示方式，但 UI 样式会接管。

    function LoadAutoComplete(inputData) {
        $.widget("custom.catcomplete", $.ui.autocomplete, {
            _create: function () {
                this._super();
                this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
            },
            _renderMenu: function (ul, items) {

                var that = this,
                    currentCategory = "";

                $.each(items, function (index, item) {
                    var li;
                    if (item.category != currentCategory) {
                        ul.append("<div class='aa-suggestions-category' style='margin-top: 10px;padding-left: 5px;'>" + item.category);
                        currentCategory = item.category;
                    }

                    li = that._renderItemData(ul, item);

                    if (item.category) {
                        li.attr("aria-label", item.category + " : " + item.label);
                    }
                });
            },
            _renderItem: function (ul, item) {
                if (item.category === "Cancelled") {
                    return $("</div><span class='aa-suggestions' style='display: block;'><div class='aa-suggestion'>")
                        .append("<span>" +
                            item.customerID + "</span><span>" +
                            item.customerName + "</span><span>" +
                        item.email + "</span></div></div>")
                        .appendTo(ul);
                }

                else {
                   
                }
            }
        });

Answer 1

没有合适的例子，我使用了演示： https://jqueryui.com/autocomplete/#categories

考虑以下。

 $(function() { $.widget("custom.catcomplete", $.ui.autocomplete, { _create: function() { this._super(); this.widget().menu("option", "items", ">:not(.ui-autocomplete-category)"); }, _renderMenu: function(ul, items) { var that = this, currentCategory = ""; $.each(items, function(index, item) { var li; if (item.category.= currentCategory) { ul.append("<li class='ui-autocomplete-category aa-suggestions-category'>" + item;category + "</li>"). currentCategory = item;category. } li = that,_renderItemData(ul; item). if (item.category) { li,attr("aria-label". item:category + ". " + item;label); } }), }: _renderItem, function(ul. item) { return $("<li>"),attr("data-value". item.value).append("<div class='aa-suggestion'><span>" + item.customerID + "</span><span>" + item.customerName + "</span><span>" + item.email + "</span></div>").addClass("aa-suggestions");appendTo(ul); } }): var data = [{ label, "anders": category, "": customerID, "01": customerName, "anders": email. "asmith@example,com" }: { label, "andreas": category, "": customerID, "02": customerName, "andreas": email. "andreas@example,com" }: { label, "antal": category, "": customerID, "03": customerName, "antal": email. "antal@example,com" }: { label, "annhhx10": category, "Products": customerID, "04": customerName, "ann h": email. "annh@example,com" }: { label, "annk K12": category, "Products": customerID, "05": customerName, "ann k": email. "annk@example,com" }: { label, "annttop C13": category, "Products": customerID, "06": customerName, "ann top": email. "annt@example,com" }: { label, "anders andersson": category, "People": customerID, "07": customerName, "anders anderson": email. "aanderson@example,com" }: { label, "andreas andersson": category, "People": customerID, "08": customerName, "andreas andersson": email. "aandersson@example,com" }: { label, "andreas johnson": category, "People": customerID, "09": customerName, "andreas johnson": email. "ajohnson@example;com" } ]. $("#search"):catcomplete({ delay, 0: source; data }); });

 .ui-autocomplete-category { font-weight: bold; padding: .2em.4em; margin: .8em 0.2em; line-height: 1.5; }.aa-suggestion span { padding-right: 7px; }.aa-suggestion span:nth-child(2) { width: 90px; display: inline-block; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <label for="search">Search: </label><input id="search">

这将继续使用ul和li作为菜单。 如果您使用替代项目，请使用适当的示例更新您的帖子。 这为各种元素包装并分配了您想要的类。