jQuery-ui自动完成显示重复的结果

时间:2017-10-20 15:54:22

标签: jquery jquery-ui autocomplete jquery-ui-autocomplete

我是一个经过大量定制的jQuery-ui自动完成功能,它可以搜索标签和描述,将结果过滤到DOM中,突出显示所选单词并按任意顺序搜索多个单词。

虽然它还没有经过测试,但我觉得我几乎就在那里,但我遇到的一个问题是,如果输入标题(例如页面类别),那么它将通过_renderItem运行两次并多次显示相同的结果。

有谁知道我在这里做错了什么?

这是我的代码:

$(function() {

            var adminPages = [
                {
                    "label": "Pages",
                    "desc": "Lorem ipsum dolor sit amet",
                    "url": "/managepages.aspx"                    
                },
                {
                    "label": "Page categories",
                    "desc": "Consectetur adipiscing elit",
                    "url": "/managecategories.aspx"
                },
                {
                    "label": "Navigation",
                    "desc": "Praesent elit libero",
                    "url": "/managenavigation.aspx"
                },
                {
                    "label": "News",
                    "desc": "Malesuada nec orci viverra",
                    "url": "/managemedia.aspx"
                },
                {
                    "label": "Files",
                    "desc": "Elementum iaculis orci",
                    "url": "/filemanager.aspx"
                },
                {
                    "label": "Galleries",
                    "desc": "Aenean eu arcu nulla",
                    "url": "/managegalleries.aspx"
                },
                {
                    "label": "Slide out tabs",
                    "desc": "Integer quis tortor eu lorem fringilla blandit",
                    "url": "/manageslideouttabs.aspx"
                },
                {
                    "label": "Generic content",
                    "desc": "Phasellus diam turpis",
                    "url": "/managegenericcontent.aspx"
                },
                {
                    "label": "Forms",
                    "desc": "Luctus sit amet congue vitae",
                    "url": "/manage-forms.aspx"
                },
                {
                    "label": "Email templates",
                    "desc": "Porttitor id purus etiam non lorem urna",
                    "url": "/manageshopemailtemplates.aspx"
                },
                {
                    "label": "Form submissions",
                    "desc": "Praesent mattis nulla quis libero gravida pretium",
                    "url": "/form-submission-table.aspx"
                },
                {
                    "label": "Users",
                    "desc": "Nullam nibh ex",
                    "url": "/manageusers.aspx"
                },
                {
                    "label": "User roles",
                    "desc": "Consequat quis mi in",
                    "url": "/manageroles.aspx"
                },
                {
                    "label": "Reset password",
                    "desc": "Maximus facilisis enim",
                    "url": "/password-reset.aspx"
                },
                {
                    "label": "Edit profile",
                    "desc": "Suspendisse quis libero at enim fringilla molestie",
                    "url": "/UserProfile.aspx"
                }
            ];

            $.each(adminPages, function (i, val) {
                $("#admin-links").append("<div class='large-4 medium-6 columns'><a href='" + val.url + "'><h3>" + val.label + "</h3></a><p>" + val.desc + "</p></div>");
            });            

            $(".admin-search").autocomplete({
                source: function (requestObj, responseFunc) {
                    var matchArry = []; 
                    var srchTerms = $.trim(requestObj.term).split(/\s+/);

                    //--- For each search term, remove non-matches.
                    $.each(srchTerms, function (J, term) {
                        $.each(adminPages, function (key, val) {                            
                            if (val.label.toLowerCase().indexOf(term.toLowerCase()) != -1 || val.desc.toLowerCase().indexOf(term.toLowerCase()) != -1) {
                                matchArry.push(adminPages[key]);
                            }
                        })
                    });

                    //--- Return the match results.
                    responseFunc(matchArry);
                },
                minLength: 0,
                response: function (event, ui) {
                    $("#admin-links").empty();
                    if (ui.content.length === 0) {
                        $("#admin-links").append("<h3>No results</h3>");

                        if ($(".ui-autocomplete-input").val() == "") {
                            $("#admin-links").empty();
                            $.each(adminPages, function (i, val) {
                                $("#admin-links").append("<div class='large-4 medium-6 columns " + val.label + "'><a href='" + val.url + "'><h3>" + val.label + "</h3></a><p>" + val.desc + "</p></div>");
                            });
                        }
                    } else {
                        $("#admin-links").empty();
                    }
                    
                    
                },
                select: function (event, ui) {
                    window.location = ui.item.url;
                }
            })
            .data("ui-autocomplete")._renderItem = function (ul, item) {
                var srchTerms = $.trim(this.term).split(/\s+/);
                var l = item.label;
                var d = item.desc;
                var label = l;
                var desc = d;

                $.each(srchTerms, function (J, term) {
                    var re = new RegExp("(" + term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ")", "ig");
                    if (re != "/()/gi") {
                        desc = desc.replace(re, "<span class='highlight'>$1</span>");
                        label = label.replace(re, "<span class='highlight'>$1</span>");
                    }
                });

                return $("<div class='large-8 medium-12 columns'>")
                    .append("<a href='" + item.url + "'>" +
                        "<h3>" + label + "</h3></a>" +
                        "<p>" + desc + "</p>")
                    .appendTo($("#admin-links"));
            };
        });
.highlight {
    background-color: #FFBF47;
    outline: 3px solid #FFBF47;
}
.ui-autocomplete {
    display:none !important;
}
#admin-links {
    display: flex;
    flex-wrap: wrap;
    clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.0/js/foundation.min.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.0/css/foundation.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<div class="form-group">
    <label ID="lblAdminSearch" runat="server">What do you want to do?</label>
    <input ID="txtAdminSearch" Class="form-control admin-search"/>
</div>

<div id="admin-links" class="row">  
</div>

提前致谢。

0 个答案:

没有答案