2

所以，我试图在我的 catcomplete 结果中使用 HTML 链接，但是 jquery 会自动将我的 html 代码转换为文本，就像在图像上一样：

jQuery CatComplete

我的 jQuery 代码是：

$( "#global-search" ).catcomplete({
    delay: 0,
    source: "globalsearch.php"
});

请不要对我说使用select: function( event, ui ) { window.location.href = ui.item.value; }，因为它在使用 ajax 时只能工作一次（我真的不知道为什么，但它只是不起作用），我昨天在这里问了一些问题，询问如何修复它，没有人帮我解决了。

那么，将 html 转换为文本后，如何在结果中添加 html 超链接？

全局搜索.php： 在此处输入图像描述

4

2 回答 2

0

查看自定义数据和显示示例。您会看到他们已经用_renderItem自定义方法替换了该方法。您需要做同样的事情来覆盖您的项目的显示方式。

$('#global-search').data( "autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data( "item.autocomplete", item )
    .append((item.link) ? "<a href='" + item.link + "'>" + item.label + "</a>" : "<a>" + item.label + "</a>" )
    .appendTo( ul );
};

在没有看到您的输出的情况下，globalsearch.php我无法确切告诉您如何设置它，但基本上您希望为link返回的 JSON 添加一个属性，如果链接存在，则打印带有链接的锚点作为其href.

您如何处理选择链接与外部链接作为练习留给 OP。

于 2012-12-04T16:55:23.103 回答
0

来自自动完成小部件文档

与您使用的变体无关，标签始终被视为文本。如果您希望标签被视为 html，您可以使用 Scott González 的 html 扩展。这些演示都专注于源选项的不同变体——寻找一个与您的用例相匹配的变体，然后查看代码。

Scott González 的 html 扩展是https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js。我还在下面发布了代码。

/*
 * jQuery UI Autocomplete HTML Extension
 *
 * Copyright 2010, Scott González (http://scottgonzalez.com)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/scottgonzalez/jquery-ui-extensions
 */
(function( $ ) {

var proto = $.ui.autocomplete.prototype,
    initSource = proto._initSource;

function filter( array, term ) {
    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
    return $.grep( array, function(value) {
        return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
    });
}

$.extend( proto, {
    _initSource: function() {
        if ( this.options.html && $.isArray(this.options.source) ) {
            this.source = function( request, response ) {
                response( filter( this.options.source, request.term ) );
            };
        } else {
            initSource.call( this );
        }
    },

    _renderItem: function( ul, item) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( $( "<a></a>" )[ this.options.html ? "html" : "text" ]( item.label ) )
            .appendTo( ul );
    }
});

})( jQuery );

编辑在使用扩展时尝试下面的代码

$( "#global-search" ).catcomplete({
    delay: 0,
    html: true,
    source: "globalsearch.php"
});
于 2012-12-04T18:16:24.870 回答