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

【问题标题】：Cannot make links clickable in jQuery autocomplete无法在 jQuery 自动完成中使链接可点击
【发布时间】：2011-04-10 16:21:05
【问题描述】：

我正在重写 jQuery Autocomplete 以显示简单链接 (<a href=...>") 和一些额外的格式，这些格式稍后需要变得更复杂。

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

有几个相关的问题（例如#4536055）有很好的答案，但它们处理的是默认的自动完成行为。 source 的答案似乎是一个 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
    });

【问题讨论】：

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

jQuery UI 自动完成在很多地方内部都使用了a 标签（查看它的 JS 和 CSS），因此试图以他们不希望的方式改变它们的行为可能会出人意料。 _renderItem 函数已经将每个自动完成项包装在 a 标记中，因此您可以将链接放入链接中。我相信这可能需要时间和精力，但是当其他答案有效并且易于实施时，这肯定是一个更好的选择吗？即使使用 JS 重定向而不是直接链接也有点 hack-ish。

【讨论】：

没错，其他答案更好。但它似乎因自定义渲染而崩溃；我不确定如何将选择功能应用于“查看全部”链接。

【解决方案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 );
                    };

现在，您可以在数组数据的“标签”字段中修改想法。

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

再见

【讨论】：