我想比较一下 JQuery Autocompleter 的两个功能
- jqueryui.com/autocomplete/#custom-data
- jqueryui.com/autocomplete/#multiple
我建立：
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine"
}
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#project" ).bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( "#project" ).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(
projects, extractLast( request.term ) ) );
},
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
var terms = split( $( "#project" ).val() );
// 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( "" );
$( "#project" ).val(terms.join( ", " ));
return false;
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
但这仍然会删除以前的值。我怎样才能使它与 jqueryui.com/autocomplete/#multiple 相同？