Question

我正在重写jQuery自动完成功能以显示简单的链接（<a href=...>“）以及一些需要在以后变得更加复杂的额外格式。

点击链接时没有任何反应。有没有办法删除任何事件处理程序或其他代码拦截点击，以便它们按预期行事？

有几个相关的问题（例如#4536055）有很好的答案，但它们处理默认的自动完成行为。 source答案看起来像是一个黑客 - 链接应该像链接一样起作用。

我的代码：

$.widget( "custom.complete_custom", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            // Trigger a "See all" link if there are two many results
            var self = this;
            var too_long = false;
            if (items.length > 10){
                original_length = items.length;
                too_long = true;
                items = items.slice(0,10);
            }

            // Display each result as a link
            $.each( items, function( index, item ) {
                ul.append( "<li class='ui-autocomplete-category'><a href='/building/" + item.buildingcode + "'>" + item.buildingname + "</a></li>" );
            });

            // Add the "See all" link if necessary
            if(too_long) {
                ul.append( "<li class='ui-autocomplete-category see-all'><a href='/search/" + 'term' + "'><strong>See all " + original_length + " results</strong></a></li>" )
            } 
        }
    });


    // The autocomplete activator
    $( "#search" ).complete_custom({
    source: "/search/json",
        minLength: 2
    });

Answer 1

jQuery UI自动完成在很多地方内部使用a标签（查看其JS和CSS），因此尝试以他们不打算的方式更改它们的行为可能会无法预测。 _ renderItem函数已将a标记中的每个自动完成项包装为一件事，因此您将链接放在链接中。我确信这可能会花费时间和精力，但当另一个答案有效且易于实施时，这肯定是更好的选择吗？即使使用JS重定向而不是直接链接也有点麻烦。

Answer 2

也许为时已晚，但可能对其他用户有用。

我们用这段代码得到它：

$.ui.autocomplete.prototype._renderItem  = function( ul, item ) {   
                        var re = new RegExp("^" + "$&") ;
                        var t = item.label.replace(re,"<span>" + "$&" + "</span>");            
                        return $( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<A>" + item.label + "</A>" )
                            .appendTo( ul );
                    };

现在，您可以在数组数据的“label”字段内修改think。

例如，我们在每个标签中添加了一些新表，但您也可以添加链接。

再见

无法在jQuery自动完成中使链接可单击

2 个答案: