jQuery Autocomplete：如何限制下拉选项最多显示10条

Hey Ronald, no problem at all—this is a super common tweak for the Autocomplete widget! To cap your dropdown at a maximum of 10 options, you can use the built-in response callback, which lets you modify matched results right before they’re rendered to the user.

Here’s your modified code with the result limit added: #

$(function() { 
  $( "#search" ).autocomplete({ 
    source:[ 
      {"label":"ALEX - A111","movie_id":"A111","name":"ALEX"}, 
      {"label":"AL - A112","movie_id":"A112","name":"AL"}, 
      {"label":"JON - A113","movie_id":"A113","name":"JON"}, 
      {"label":"JOE - A114","movie_id":"A114","name":"JOE"}, 
      {"label":"TOM - A115","movie_id":"A115","name":"TOM"}, 
      {"label":"TED - A116","movie_id":"A116","name":"TED"}, 
      {"label":"TESS - A117","movie_id":"A117","name":"TESS"}, 
      {"label":"SAM - A118","movie_id":"A118","name":"SAM"}, 
      {"label":"RON - A119","movie_id":"A119","name":"RON"}, 
      {"label":"RICK - A120","movie_id":"A120","name":"RICK"}, 
      {"label":"CAM - A121","movie_id":"A121","name":"CAM"}, 
      {"label":"LUCY - A122","movie_id":"A122","name":"LUCY"}, 
      {"label":"TIM - A123","movie_id":"A123","name":"TIM"}, 
      {"label":"ERIC - A124","movie_id":"A124","name":"ERIC"}, 
      {"label":"KERRY - A125","movie_id":"A125","name":"KERRY"}, 
      {"label":"AMY - A126","movie_id":"A126","name":"AMY"}, 
      {"label":"GREG - A127","movie_id":"A127","name":"GREG"}, 
      {"label":"MIKE - A128","movie_id":"A128","name":"MIKE"}, 
      {"label":"BILL - A129","movie_id":"A129","name":"BILL"}, 
      {"label":"BOB - A130","movie_id":"A130","name":"BOB"} 
    ], 
    minLength: 1, // Trigger search after 1 character
    // New: Add this callback to limit results
    response: function(event, ui) {
      // Trim the matched results to the first 10 items
      ui.content = ui.content.slice(0, 10);
    },
    focus: function(event, ui) { 
      $("#search").val(ui.item.label); 
      return false; 
    }, 
    change: function(event, ui) { 
      if (!ui.item) { 
        alert("You must select a 'Member' from the drop-down list."); 
        $("#search").val(''); 
        $("#search").focus(); 
        $("#name").val(''); 
        return false; 
      } 
    }, 
    select: function( event, ui ) { 
      event.preventDefault(); 
      $('#search').val(ui.item.label); 
      this.value = ui.item.label; 
      $('#name').val(ui.item.movie_id); 
    } 
  }); 
});

Quick breakdown of the fix: #

• The response callback runs right after Autocomplete has filtered your source data to match the user’s input, but before the dropdown is displayed.
• ui.content is the array of matched results—we use slice(0,10) to keep only the first 10 entries, discarding any extra matches.
• All your existing functionality (focus/change/select handlers, 1-character trigger) stays fully intact—this just adds the result limit on top.

If you ever switch to a dynamic source (like fetching results from an API later), you can either handle the limit server-side or still use this same response callback to trim results client-side.

内容的提问来源于stack exchange，提问作者Ronald