jquery自动完成 - 多个和自定义数据

Question

我想比较一下JQuery Autocompleter的两个功能

1. jqueryui.com/autocomplete/#custom-data
2. 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？

相同

LIVE DEMO

Answer 1

你的焦点功能是责备，试试这个：

  focus: function( event, ui ) {
  // bad:   $( "#project" ).val( ui.item.label );
    return false;
  }

请参阅：http://jsfiddle.net/CYULZ/1/