Click here to Skip to main content
14,836,532 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>
   

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