使用多个选择选项加入分类自动完成功能

时间:2012-11-30 11:57:43

标签: javascript jquery jquery-autocomplete

我正在尝试将自动完成插件的两个功能合并为一个:
自动完成也应该有类别搜索,它也需要多次选择,但多选部分不能完全在我的代码中工作..我添加了一个我在jsfiddle文件中做过的例子:< / p>

http://jsfiddle.net/2RYGZ/

我使用了keydown选项,但在第一次选择后没有获取结果。

 $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var that = this,
            currentCategory = "";
        $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            that._renderItemData( ul, item );
        });
    }
});


$(function() {
    var data = [
        { label: "anders", category: "" },
        { label: "andreas", category: "" },
        { label: "antal", category: "" },
        { label: "annhhx10", category: "Products" },
        { label: "annk K12", category: "Products" },
        { label: "annttop C13", category: "Products" },
        { label: "anders andersson", category: "People" },
        { label: "andreas andersson", category: "People" },
        { label: "andreas johnson", category: "People" }
    ];

    $( "#search" ).live("keydown",function(){
        $( "#search" ).catcomplete({
            delay: 0,
            source: data,
            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;
            }
        });
    });

});

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

0 个答案:

没有答案