jquery ui自动完成搜索词的随机顺序和链接到url
问题描述:
我想实现jquery-ui自动完成,但有一些自定义功能。我正在尝试搜索标签和描述,然后选择一次即可访问该网址。jquery ui自动完成搜索词的随机顺序和链接到url
我已经实现了以任何顺序搜索标签和描述的单词,但正因为如此,我似乎无法引用_renderItem或select函数中的item.desc或item.url。
我相信有一些简单的我在这里失踪,所以任何建议都会很棒。 在此先感谢。
$(function() {
var adminPages = [
{
"label": "Manage pages",
"desc": "here is some text",
"url": "/managepages.aspx"
},
{
"label": "Manage Navigation",
"desc": "here is some text",
"url": "/managenavigation.aspx"
}
];
//var result = adminPages.map(a => a.label);
var result = $.map(adminPages, function (n, i) {
return [[n.label, n.desc]];
});
$(".admin-search").autocomplete({
source: function (requestObj, responseFunc) {
var matchArry = result.slice(); //-- Copy the array
var srchTerms = $.trim(requestObj.term).split(/\s+/);
//--- For each search term, remove non-matches.
$.each(srchTerms, function (J, term) {
var regX = new RegExp(term, "i");
matchArry = $.map(matchArry, function (item) {
return regX.test(item) ? item : null;
});
});
//--- Return the match results.
responseFunc(matchArry);
},
select: function (event, ui) {
//window.location = ui.item.url;
}
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + item.label +
"<br><span style='font-size: 80%;'>Desc: " + item.desc + "</span>" +
"<br><span style='font-size: 80%;'>Url: " + item.url + "</span></a>")
.appendTo(ul);
};
});
答
查看您的代码笔后,我有一个建议。就个人而言,我不是.map()
的粉丝,所以我在大多数情况下避免使用它。
这里是我的建议:
的JavaScript
$(function() {
var adminPages = [{
"label": "Pages",
"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit libero, malesuada nec orci viverra, elementum iaculis orci.",
"url": "#"
}, {
"label": "Page categories",
"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit libero, malesuada nec orci viverra, elementum iaculis orci.",
"url": "#"
}];
$.each(adminPages, function(i, val) {
$("#admin-links").append("<div class='large-8 medium-12 columns'><a href='" + val.url + "'><h2>" + val.label + "</h2></a><p>" + val.desc + "</p></div>");
});
$(".admin-search").autocomplete({
source: function(requestObj, responseFunc) {
var matchArry = [];
var srchTerms = $.trim(requestObj.term).split(/\s+/);
console.log("1 - searching");
$.each(srchTerms, function(J, term) {
$.each(adminPages, function(key, val) {
console.log("Is '" + term + "' in '" + val.label + "'?");
if (val.label.toLowerCase().indexOf(term) != -1) {
console.log("Yes.");
matchArry.push(adminPages[key]);
}
})
});
//--- Return the match results.
responseFunc(matchArry);
},
select: function(event, ui) {
console.log("2 - selected");
console.log("Navigating to: " + ui.item.url);
window.location = ui.item.url;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $("<li>")
.append("<a>" + item.label +
"<br><span style='font-size: 80%;'>Desc: " + item.desc + "</span>" +
"<br><span style='font-size: 80%;'>Url: " + item.url + "</span></a>")
.appendTo(ul);
};
});
工作实例:https://jsfiddle.net/Twisty/qeqymya1/
当将数据传回responseFunc
,你想传递对象的数组包含所有你渴望的元素。您的原始代码只传递一个数组,其中包含匹配的标签。
此解决方案返回包含label
,desc
和url
元素的对象数组。
+0
不错的欢呼队友! –
它看起来像'matchArry'不包含'url'元素。会认为你会想要返回'adminPages [J]'。 – Twisty
嗨Twisty,感谢您的评论,我不确定这将实施,但。如果您有时间查看并让我知道,我已添加了代码笔链接。谢谢 –