Scrollable Autocomplete List For jQuery UI

jquery.ui.autocomplete.scroll.js is a jQuery extension for the jQuery UI autocomplete widget that makes the suggestion list scrollable and allows to specify the maximum number of entries to show. Suitable for long autocomplete list.

How to use it:

1. Include the necessary jQuery library and jQuery UI framework on the web page.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. Download and put the jquery.ui.autocomplete.scroll.js script after jQuery & jQuery UI.

<script src="jquery.ui.autocomplete.scroll.js"></script>

3. Enable the autocomplete functionality on your input field and define the data to use.

<input type="text" value="" id="demo">

$(function() {

  $('#example').autocomplete({
    source: [
      'Afghanistan', 
      'Åland Islands', 
      'Albania', 
      'Algeria', 
      'American Samoa', 
      'Andorra', 
      'Angola', 
      'Anguilla', 
      'Antigua and Barbuda', 
      'Argentina', 'Armenia', 
      ...
    ]
  });

});

4. Specify the max number of items displayed in the suggestion list.

$(function() {

  $('#example').autocomplete({
    maxShowItems: 10,
    source: [
      'Afghanistan', 
      'Åland Islands', 
      'Albania', 
      'Algeria', 
      'American Samoa', 
      'Andorra', 
      'Angola', 
      'Anguilla', 
      'Antigua and Barbuda', 
      'Argentina', 'Armenia', 
      ...
    ]
  });

});

---

This awesome jQuery plugin is developed by anseki. For more Advanced Usages, please check the demo page or visit the official website.