Question

我正在使用自动完成多个值进行表单输入并且完美地工作，但是我遇到了一些问题。我想如果我选择Alvin的第一个选项，那么我选择Yossy的第二个选项。因此，当我想选择Yossy时，选项Alvin会出现红色背景（课堂活跃）

我试图从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

我已经检查了它的配偶，这是一个解决问题的办法。可能还有其他正确的方法。但我认为这样的事情可能有助于你交配:)

$(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选择jquery ui autocomplete添加类？

1 个答案: