我是一个经过大量定制的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>
提前致谢。