jQuery UI & Autocomplete: Scrollable results

This entry is part 2 of 7 in the series jQuery UI Autocomplete

jQuery UI Autocomplete – Scrollable results

When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large.

Try typing “a” or “s” above to get a long list of results that you can scroll through.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Scrollable results</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        .ui-autocomplete {
            max-height: 100px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;

        /* IE 6 doesnt support max-height
         * we use height instead, but this forces the menu to always be this tall
        * html .ui-autocomplete {
            height: 100px;
        $(function () {
            var availableTags = [
                source: availableTags

<div class='ui-widget'>
    <label for='tags'>Tags: </label>
    <input id='tags'>

Try The Code
Series Navigation<< jQuery UI & Autocomplete: Basic functionality
jQuery UI & Autocomplete: Accent folding >>

Leave a comment

Leave a Reply