我有一个代码,会产生一个自动完成下拉列表,但是,我希望结果是指向我网站上其他页面的URL链接。我知道可以使用不同的自动完成功能,但这很适合我的网站需求。
任何帮助都非常欢迎
代码由https://codular.com/demo/jquery-autocomplete-suggestion-dropdown.html
提供var data = [{
name: "Paul",
description: 'Somebody'
}, {
name: 'Ben',
description: 'The Other Writer'
}, {
name: 'Joel',
description: 'The CodeIgniter Writer '
}, {
name: 'Mark ',
description: 'Made Up Person #1'
}];
// Suggest section holder var $suggestedHL = $('.suggest-holder'); //
Suggestions UL
var $suggestedUL = $('ul', $suggestedHL); // Suggestions LI var
$suggestedLI = $('li', $suggestedHL); // Selected Items UL var $selectedUL =
$('#selected-suggestions'); // Keyboard Nav Index var index = -1; // Add a
suggestion to the selected holder
function addSuggestion(el) {
$selectedUL.append($(' < ul > < li > ' + el.find('.suggest - name ').html() + ' < /li> < li style = "list-style: none" > ')); } $('
input ', $suggestedHL).on({ keyup:
function(e) {
var m = false;
if (e.which == 38) { // Down arrow - Check that
we 've not tried to select before the first item if (--index < 0) { index =
0;
} // Set a variable to show that we've done some keyboard navigation m =
true;
} else if (e.which == 40) { // Up arrow - Check that index is not
beyond the last item
if (++index & gt; $suggestedLI.length - 1) {
index = $suggestedLI.length - 1;
} // Set a variable to show that we've done some
keyboard navigation m = true;
} // Check we've done keyboard navigation if
(m) { // Remove the active class $('li.active',
$suggestedHL).removeClass('active'); $suggestedLI.eq(index).addClass('active');
}
else if (e.which == 27) {
index = -1; // Esc key $suggestedUL.hide(); } else if (e.which == 13) { // Enter
key
if (index & gt; - 1) {
addSuggestion($('li.active', $suggestedHL));
index = -1;
$('li.active', $suggestedHL).removeClass('active');
}
} else {
index = -1; // Clear the ul $suggestedUL.empty(); // Cache the search term $search =
$(this).val(); // Search regular expression $search = new
RegExp($search.replace(/[^0-9a-z_]/i), 'i'); // Loop through the array for
(var i in data) {
if (data[i].name.match($search)) {
$suggestedUL.append($(" < /li> < li > < span class = 'suggest-name' > " + data[i].name + " < /span><span class=
'suggest-description' > " + data[i].description + " < /span> < /li> < li style = "list-style: none" > ")); } } // Show the ul $suggestedUL.show(); }
if ($(this).val() == '') {
$suggestedUL.hide();
}
}, keydown: function(e) {
if (e.which == 38 || e.which == 40 || e.which == 13) {
e.preventDefault();
}
}, focus: function(e) {
if ($(this).val() != '') {
$suggestedUL.show();
}
}
});
$suggestedHL.on('click', 'li', function(e) {
addSuggestion($(this));
});
$('body').on('click', function(e) {
if (!$(e.target).closest('.suggest-holder
li, .suggest - holder input ').length) { $suggestedUL.hide(); }; }); < /li>