具有多个值和多个标签的Jquery UI自动完成

Question

我有两个字段，一个隐藏，一个是文本输入。 我从远程PHP文件接收信息，该文件以JSON格式（值和标签）提供信息。

我要做的是在文本字段中显示所选标签，用逗号分隔，但同时我希望分割标签的值在隐藏输入中（也用逗号分隔），这是我的代码到目前为止的文本字段缺少隐藏值输入的代码

<script type="text/javascript">
    function split( val ) {
    return val.split( /,\s*/ );
    }
    function extractLast( term ) {
    return split( term ).pop();
    }
    $( "#category_pictures_labels" )
    // 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( "ui-autocomplete" ).menu.active ) {
    event.preventDefault();
    }
    })
    .autocomplete({
    source: function( request, response ) {
    $.getJSON( "/admin/pictures_autocomplete", {
    term: extractLast( request.term )
    }, response );
    },
    search: function() {
    // custom minLength
    var term = extractLast( this.value );
    if ( term.length < 1 ) {
    return false;
    }
    },
    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>

<input type="text" name="category_pictures_labels" value="" id="category_pictures_labels" />
<input type="text" name="category_pictures" value="" id="category_pictures" />

Answer 1

DEMO

JS代码：

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

var projects = [
{
value: "yahoo",
label: "Yahoo !"
},
{
value: "bing",
label: "Bing"
},
{
value: "google",
label: "Google"
}
];

$( "#project" )
 // don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
projects, extractLast( request.term ) ) );
},

//    source:projects,    
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( ", " );

    var selected_label = ui.item.label;
    var selected_value = ui.item.value;

    var labels = $('#labels').val();
    var values = $('#values').val();

    if(labels == "")
    {
        $('#labels').val(selected_label);
        $('#values').val(selected_value);
    }
    else    
    {
        $('#labels').val(labels+","+selected_label);
        $('#values').val(values+","+selected_value);
    }   

return false;
}
});

 });     

HTML：

<div id="project-label">Select search engines <b>(multiple)</b> (type "g" or "b" or "y" for a start):</div>
<input id="project">
<br>
Selected labels:    
<input type="text" id="labels">
<br>
Selected values:    
<input type="text" id="values">