如何为 li selected jquery ui 添加 class 自动完成？

Question

我正在使用自动完成多个值进行表单输入并且工作正常，但我遇到了一些问题。我想如果第一个选项我选择 Alvin，那么第二个选项我选择 Yossy。所以当我想选择 Yossy 时，选项 Alvin 会出现红色背景 ( class active )

我尝试学习 jquery ui 自动完成的方法，但我仍然对它的工作原理感到困惑。

这是我的代码

$(document).ready(function() {
var availableTags = [
    "Alvin Lim",
    "Khia Wijaya",
    "Suryo Guritno",
    "Adjie Hidayat",
    "Yossy Mo",
    "Iwan Prasetyo",
];

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

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

$( "#account" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {

    /* $('#keyword input#account').css('background','url(../image/arrow-up.png) no-repeat 95% center #bcbcbc'); */
    if ( event.keyCode === $.ui.keyCode.TAB &&
        $( this ).data( "ui-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;
}


});
});

谁能帮帮我？提前致谢，问候 :)

Answer 1

我还没有检查过，伙计，这只是一部作品-around.There 可能是其他正确的做法 it.But 我认为这样的事情可能会对你有所帮助 :)

$(document).ready(function() {
        var terms;
    var availableTags = [
        "Alvin Lim",
        "Khia Wijaya",
        "Suryo Guritno",
        "Adjie Hidayat",
        "Yossy Mo",
        "Iwan Prasetyo",
    ];

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

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

    $( "#account" )
    // don't navigate away from the field on tab when selecting an item
    .bind( "keydown", function( event ) {

        /* $('#keyword input#account').css('background','url(../image/arrow-up.png) no-repeat 95% center #bcbcbc'); */
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-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 ) {
        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;
    }


    }).data('autocomplete')._renderItem = function( ul, item ) {
        if($.inArray(item.label, terms) > -1 ){
         return $( "<li></li>" )
                .data( "item.autocomplete", item )
        .append( '<a class="selected">' + item.label + '</a>' )
                .appendTo( ul );
        }else{
                return $( "<li></li>" )
                .data( "item.autocomplete", item )
        .append( '<a>' + item.label + '</a>' )
                .appendTo( ul );
        }

        };
        //}
    });

如何为 li selected jquery ui 添加 class 自动完成？

How to add class for li selected jquery ui autocomplete?

jquery

jquery-ui

autocomplete

jquery-autocomplete

addclass