0

JQuery Autocompleter の 2 つの機能を比較したい

  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 と同じにするにはどうすればよいですか?

ライブデモ

4

1 に答える 1

0

あなたのフォーカス機能が原因です。これを試してください：

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

参照: http://jsfiddle.net/CYULZ/1/

于 2013-09-19T20:41:00.083 に答える