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

Question

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

当单击链接时，什么都不会发生。是否有办法删除拦截点击的任何事件处理程序或其他代码，使其按预期行事？

有几个相关的问题（例如#4536055），有很好的答案，但它们涉及默认的自动完成行为。源答案似乎是一个hack - 链接应该像链接一样工作。

我的代码：

$.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
    });

- Matt Hampel

Answer 1

jQuery UI 自动完成在许多地方内部使用 a 标签（查看其 JS 和 CSS），因此试图以他们不打算的方式改变它们的行为可能会产生不可预测的结果。_renderItem 函数已经将每个自动完成项包装在 a 标签中，因此您将在链接中放置链接。我相信这是可能的，但需要时间和精力，但当其他答案有效且易于实现时，那肯定是更好的选择？即使使用 JS 重定向而不是直接链接有点 hack-ish。

- Michael Low

---

没错，另一个答案更好。但是似乎在自定义渲染方面出了问题；我不确定如何将选择函数应用于“查看全部”链接。 - Matt Hampel

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”字段内的内容。

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

再见

- user2436275