jquery - 如何使用jQuery自动完成功能限制用户仅选择4个值

我正在尝试使用jquery自动完成建议仅选择4个值。选择4个值后，它们显示错误消息，您只能选择4个值。请帮助我如何限制用户仅标记4个值。

   <div class="ui-widget">
   <input type="text" id="tags">
   </div>
   <script>
   $(function() {
   var availableTags = [
  "Spanish","Chinese","Tagalog","Vietnamese","Korean","Armenian","Japanese","Persian","Russian","Arabic",
  "Italian","French","German",
  "Cherokee","Dutch","Finnish","Hebrew","Ilocano","Indian","Irish","Khmer",
  "Polish","Portuguese","Scottish Gaelic","Swedish","English","Welsh","Yiddish"
];
function split( val ) {
  return val.split( /,\s*/ );
}
function extractLast( term ) {
  return split( term ).pop();
}

$( "#tags" )
  // 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(
        availableTags, extractLast( request.term ) ) );

    },
    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;
    }
  });
});

最佳答案

检查一下，可能对您有帮助。它只选择4

$("#auto").autocomplete({
source: function(request, response) {
    var results = $.ui.autocomplete.filter(src, request.term);

    response(results.slice(0, 4));
}
});

<input type="text" id="auto" maxlength="4"/>

http://jsfiddle.net/vqwBP/1088/

关于jquery - 如何使用jQuery自动完成功能限制用户仅选择4个值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32158198/