javascript - 自动完成 onselect 事件打开链接

Question

我正在使用 pixabay 自动完成功能 ( https://goodies.pixabay.com/jquery/auto-complete/demo.html )

经过一些测试，我成功地将结果的纯文本列表更改为链接列表，但即使检查链接是否正确打印，这些链接也不起作用，并且单击一个链接时发生的所有情况都是显示选择字段中的数据值...

这是我的自动完成设置的代码:

$('#search_members').autoComplete({
    minChars: 2,
    delay: 100, 
    source: function(name, response) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/wp-admin/admin-ajax.php',
            data: 'action=get_listing_names&name='+name,

            success: function(data) {
                response(data);
            }
        });
    },
    renderItem: function (item, search){
        var itemlabel = item.label;
        var itemvalue = item.value;
        var itemurl = item.url;
        search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); //unused
        var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi"); //unused
        return '<div class="autocomplete-suggestion" data-val="' + itemvalue + '"><a href="' + itemurl + '">' + itemlabel + '</a></div>';
    },
});

这里是一个数据样本(json 对象):

[{"value":"215","label":"ARMOR","url":"http:\/\/dev.local\/dashboard\/?sid=215"},{"value":"216","label":"ICOEL","url":"http:\/\/dev.local\/dashboard\/?sid=216"},{"value":"3230","label":"PASSAT","url":"http:\/\/dev.local\/dashboard\/?sid=3230"}]

正如我所说，通过开发人员工具查看，链接已完美呈现:

<div class="autocomplete-suggestions " style="top: 194px; left: 299px; width: 200px; display: none;">
    <div class="autocomplete-suggestion" data-val="215">
        <a href="http://dev.local/dashboard/?sid=215">ARMOR</a>
    </div>
    <div class="autocomplete-suggestion" data-val="216">
        <a href="http://dev.local/dashboard/?sid=216">ICOEL</a>
    </div>
    <div class="autocomplete-suggestion" data-val="3230">
        <a href="http://dev.local/dashboard/?sid=3230">PASSAT</a>
    </div>
</div>

我不是 jquery 专家...我做错了什么？

Answer 1

发生这种情况是因为这个库阻止了链接的默认操作，并且事件的默认操作(重定向到某个地方)不会被触发。 所以你可以使用这个库的onSelect函数来手动触发它。

只需将以下代码替换为您的代码:

    $('#search_members').autoComplete({
    minChars: 2,
    delay: 100, 
    source: function(name, response) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/wp-admin/admin-ajax.php',
            data: 'action=get_listing_names&name='+name,

            success: function(data) {
                response(data);
            }
        });
    },
    renderItem: function (item, search){
        var itemlabel = item.label;
        var itemvalue = item.value;
        var itemurl = item.url;
        search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); //unused
        var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi"); //unused
        return '<div class="autocomplete-suggestion" data-url="' + itemurl + '" data-val="' + itemvalue + '"><a href="' + itemurl + '">' + itemlabel + '</a></div>';
    },
    onSelect: function(e, term, item){
         window.location = item.data('url');
    }
});