jquery-ui - jQuery自动完成：如何显示标签计数？

Question

With Aotocomplete, I want to display name(count) as auto suggestion, when an item is selected, only the name is printed in the input box.My data format is like this

[{"name":"Test","count":"5"},{"name":"Javascript","count":"1"}]

可以显示名称不计数的代码，打印多选项目：

jQuery(document).ready(function ($){

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

    $("#ctags-input")
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
    .autocomplete({ 

        source: function(req, add){
            var ctags_action = 'ctags_autosuggest';

            $.getJSON(CTags.url+'?callback=?&action='+ctags_action, req, function(data) {   

                var suggestions = [];

                $.each(data, function(i, val){                              
                    suggestions.push(val.name);
                });
                add(suggestions);
            });
        },
        focus: function() { 
            return false;
        },

        select: function( event, ui ) {
            var terms = split( this.value );
            terms.pop();
            terms.push( ui.item.value );
            terms.push( "" );
            this.value = terms.join( ", " );
            return false;
        }
    });

});

我试过suggestions.push(val)了；它不起作用。I also tried suggestions.push(val.name + "C" + count + ")" );This can display name(count), but when selected, the (count) also get selected. 如何将显示名称（计数）显示为建议并仅输入名称？

Answer 1

查看自定义数据并显示演示。您可以将此示例与您的多值代码结合起来，并将计数与项目的标签一起显示：

$("#ctags-input")
    .bind( "keydown", function (event) {
        /* snip */
    })
.autocomplete({ 
    source: function(req, add){
        var ctags_action = 'ctags_autosuggest';

        $.getJSON(CTags.url+'?callback=?&action='+ctags_action, req, function(data) {   
            var suggestions = [];

            $.each (data, function(i, val) {      
                suggestions.push({
                    label: val.name,
                    count: val.count
                });
            });

            add(suggestions);
        });
    },
    /* snip */
}).data("autocomplete")._renderItem = function(ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + " (" + item.count+ ")</a>")
        .appendTo(ul);
};

示例： http: //jsfiddle.net/NwRR6/（不包括远程部分）。