Jquery可滚动自动完成 - 检测底部

时间:2017-10-09 09:24:55

标签: jquery autocomplete

我有以下jquery:

$( "#input-name" ).autocomplete({
                        source: function(request, response) {
                            if (!names.length){
                                names = [NoResultsLabel];
                            }
                            response(names);
                        },
                        select: function (event, ui) {
                            if (ui.item.label === NoResultsLabel) {
                                event.preventDefault();
                            }
                            for(var i=0;i<data.schools.length;i++){
                                if(ui.item.label == names[i]){
                                    document.getElementById('filter[id]').value = ids[i];
                                    i = data.schools.length;
                                }
                            }
                        },
                        focus: function (event, ui) {
                            if (ui.item.label === NoResultsLabel) {
                                event.preventDefault();
                            }
                        }
                    });

我添加了这个css以使其可滚动:

 <style>
    .ui-autocomplete {
        max-height: 100px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .ui-state-focus {
        font-weight: normal;
    }
</style>

并且我想检测用户何时滚动到底部并启动ajax请求,因为有太多行匹配相同的名称(我正在通过他们的名字搜索学校并且选择我正在返回的coressponding id

我试过这个

 jQuery(function($) {
            $('.ui-autocomplete').on('scroll', function() {
                if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                    requests++;
                    getSchools();
                }
            })
        });

但它无效

1 个答案:

答案 0 :(得分:0)

我发现了什么是错的,是选择器,我找到了这个工作单

$("selector").autocomplete( "widget" ).scroll(function(){
                    ...
                });

但仅在初始化自动完成后调用此函数