javascript - 如何使用滚动加载自动完成数据

Question

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

Answer 1

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

但是，我一定会向您展示一些实现这一目标的步骤。

1. 将 PHP 返回的所有条目加载/存储在变量中。

2. 然后，您需要绑定(bind)自动完成下拉列表必须刷新以加载接下来 10 个条目的事件。例如，它可能是向下箭头keydown事件。

3. 此绑定(bind)事件必须检查焦点元素是否是第 10 个条目。维护一个变量来存储焦点元素的索引，该索引将在 Up 或 Down 箭头 keydown 上更改。

4. 然后，如果您的焦点元素是第 10 个元素，并且用户按下 Down 键，那么您应该触发自动完成 search 事件。

JS

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;
    }
});

这只是一个用于展示的小示例。您需要对其进行大量更改并添加更多内容才能获得您想要的内容。