通过超链接自动完成

时间:2019-05-08 10:42:14

标签: jquery html hyperlink autocomplete

我有一个代码,会产生一个自动完成下拉列表,但是,我希望结果是指向我网站上其他页面的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 &lt; 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>

0 个答案:

没有答案