2

そのため、catcomplete の結果で HTML リンクを使用しようとしていますが、jquery は自動的に HTML コードを画像のようにテキストに変換します。

jQuery CatComplete

そして私のjQueryコードは次のとおりです。

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

を使用するように言わないでください.ajaxを使用するselect: function( event, ui ) { window.location.href = ui.item.value; }と1回しか機能しないためです（理由はわかりませんが、機能しません）。昨日ここで修正方法を尋ねる質問をしましたが、誰もいませんそれを手伝ってくれました。

では、html をテキストに変換したところで、結果に html ハイパーリンクを追加するにはどうすればよいでしょうか?

globalsearch.php: ここに画像の説明を入力

4

2 に答える 2

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 に答える
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 に答える