jQuery UI & Autocomplete: Scrollable results

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'>
<head>
    <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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .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;
        }
    </style>
    <script>
        $(function () {
            var availableTags = [
                'ActionScript',
                'AppleScript',
                'Asp',
                'BASIC',
                'C',
                'C++',
                'Clojure',
                'COBOL',
                'ColdFusion',
                'Erlang',
                'Fortran',
                'Groovy',
                'Haskell',
                'Java',
                'JavaScript',
                'Lisp',
                'Perl',
                'PHP',
                'Python',
                'Ruby',
                'Scala',
                'Scheme'
            ];
            $('#tags').autocomplete({
                source: availableTags
            });
        });
    </script>
</head>
<body>

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

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