Click here to Skip to main content
15,886,776 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I made a autocomplete search with dropdown list, but the scroll did not work, and the list is crashed with the keyboard on the tablet

What I have tried:

I use this code for search and show the list
function ListPlayer(ScnFK, list) {
    var selectName = null;
    tempName = [];
    $("#" + list + "").autocomplete({
        source: arr,
        minLength: 1,
        hint: true,
        highlight: true,
        scroll: true,
        autofocus: true,
        search: function (oEvent, oUi) {
            var sValue = $(oEvent.target).val();
            var aSearch = [];
            $(arr).each(function (index, element) {
                var str = $(element).attr("value");
                str = str.toUpperCase();
                if (str.substr(0, sValue.length) == sValue.toUpperCase()) {
                    for (var j = 0; j < lists.length; j++) {
                        selectName = $("#" + lists[j]).attr("value");
                        tempName.push(selectName.toUpperCase());
                    }
                    if (~tempName.indexOf(str.toUpperCase()) > -1) {
                        aSearch.push(element);
                    }
                }
            });
            $(this).autocomplete("option", "source", aSearch);
        },
        open: function (oEvent, oUi) {
            $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
        }
    });
    if (~lists.indexOf(list) > -1) {
        lists.push(list);
    }
}
Posted
Updated 1-Aug-17 0:27am

1 solution

There is an example of this over at jQuery UI Autocomplete - Scrollable results[^]. It looks like it just needs a bit of CSS magic:
<style>
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
    height: 100px;
}
</style>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900