0

jquery autocomplete で複数の入力を強調表示する際に問題があります。最初の入力は強調表示されますが、残念ながら 2 番目の入力は強調表示されません:(

そのため、Java を入力すると単語が太字になりますが、その後 Java をコンマで区切り、別の単語を入力すると太字になりません。

助けてください

<script>jQuery(document).ready(function() {
    var availableTags=["Java","J2ee","Spring","Hibernate","CSS","HTML","Struts","Struts 2","Maven","Maven 2","Spring Roo","Warszawa","JSF 2.0","EJB"];
    $.extend($.ui.autocomplete.prototype, {
        _renderItem: function( ul, item ) {
            var term = this.element.val(),
                regex = new RegExp( '(' + term + ')', 'gi' );
            html = item.label.replace( regex , "<b>$&</b>" );
            return $( "<li></li>" ).data( "item.autocomplete", item ).append( $("<a></a>").html(html) ).appendTo( ul );
        }
    });

    function split( val ) {
        return val.split( /,\s*/ );
    }

    function extractLast( term ) {
        return split( term ).pop();
    }

    $( "#tags" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 0,
            source: function( request, response ) {
                // delegate back to autocomplete, but extract the last term
                response( $.ui.autocomplete.filter(
                    availableTags, extractLast( request.term ) ) );
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            }
        });
});
</script>
4

1 に答える 1

0

アップデート

コードをよく見てみると、問題は確かにここにありました。

var term = this.element.val(),
    regex = new RegExp( '(' + term + ')', 'gi' );

あなたは.val()テキストボックスをいっぱいにしています。次のように修正してください：

regex = new RegExp( '(' + extractLast(term) + ')', 'gi' );

追加

とにかく、それは関係ないかもしれませんが、大胆な効果を得るために私が通常行うことは、 をsource:書き換えるのではなく、関数で構成すること_renderItemです。このような：

    source: function (request, response) {
        console.log(request.term);
        var filtered = $.ui.autocomplete.filter(availableTags, extractLast(request.term));
        var regex = new RegExp('(' + extractLast(request.term) + ')', 'gi' );
        var results = [];
        filtered.forEach(function (item) {
            results.push({ label: item.replace(regex , "<b>$1</b>"), value:item });
        });
        response(results);
    },
    html: true, // see below why this is needed.

フィドルのコードを更新しました。今は動作するはずです: http://jsfiddle.net/95aH7/1/

重要: jQuery UI をロードした後、スクリプトにjquery.ui.autocomplete.htmlを含める必要があります。また、拡張機能を機能させるには、オートコンプリート オプションに追加する必要がありhtml: trueます (フィドルを見てください)。

于 2012-10-30T16:40:49.253 に答える