如何使用滚动加载自动完成数据答案

【问题标题】：How to load autocomplete data with scroll如何使用滚动加载自动完成数据
【发布时间】：2014-08-30 20:24:56
【问题描述】：

我创建了 jquery 自动完成搜索。我必须在我的自动完成下拉列表中加载超过 1000 条记录。一旦用户向下滚动下一条记录，我想将其更改为第一次滚动 10 条记录，请对此提出建议/

【问题讨论】：

看这里：jqueryui.com/autocomplete/#maxheight
@j809: 我放了最大高度。但我想要的是首先只加载 10 条记录。一旦向下滚动只开始加载其他记录。分页类型
您是否按照我的回答进行了尝试？工作了吗？

标签： javascript php jquery autocomplete

【解决方案1】：

恐怕我无法为您编写整个代码，因为 SO 不是让人们为您的代码工作的地方。

但是，我一定会向您展示一些您将能够实现它的步骤。

将PHP 返回的所有条目加载/存储在一个变量中。
然后，您需要绑定自动完成下拉菜单必须刷新以加载接下来的 10 个条目的事件。比如可能是Down箭头keydown事件。
此绑定事件必须检查焦点元素是否为第 10 个条目。维护一个变量来存储焦点元素的索引，它会在Up 或Down 箭头keydown 上发生变化。
然后，如果您的焦点元素是第 10 个元素并且用户将按下 Down 键，那么您应该触发自动完成 search 事件。

var items[] = ... //your autocomplete items cached
var focused = 1;  //maintain variable to store focused element
$(input).bind( "keydown", function( event ) { //bind keydown event
    if ( event.keyCode == $.ui.keyCode.DOWN ) {
        ++focused;
        if(focused==10){
            $(input).autocomplete("option","source",//items from 1-10, 11-20,... changing for each page);
            $(input).autocomplete("search",searchParam);//searchParam is input content, you can filter it to get last typed word
            focused=1; //Reset focused element to first
        }
    }
    else if ( event.keyCode == $.ui.keyCode.UP ) {
        --focused;
    }
});

这只是一个小样本，只是为了展示。您需要对其进行大量更改并添加更多内容以获得您想要的内容。

【讨论】：