在后台系统或企业应用中，检索框经常需要对接上万条记录的远程接口。jQuery UI Autocomplete本身并未提供滚动分页能力，开发者必须自行扩展才能在不刷新页面的情况下持续拉取后续数据。
一、Autocomplete远程分页的核心难点
Autocomplete的设计逻辑是：每次输入变化触发一次source查询，控件拿到数据后替换整个下拉列表。这种“全量替换”机制与分页所需的“增量追加”天然冲突。当我们从服务器取回第2页数据时，如果直接调用response，旧的第1页结果会被清除，用户之前看到的条目消失，体验非常糟糕。
另一个难点是滚动事件的绑定位置。Autocomplete生成的下拉面板是动态创建的ul元素，它外部包裹着ui-autocomplete的div容器。很多开发者误把滚动监听挂在window或document上，导致根本捕捉不到下拉内部的滚动行为。只有准确找到面板容器，才能判断用户是否滑到了底部。
二、改造source实现页码与数据累加
我们需要在控件外部维护两个变量：当前页码和已加载的总数据数组。在source函数里，根据搜索词和页码去请求接口。第一次输入关键词时页码重置为1，后续滚动触底时页码加1再发请求。
示例代码如下，注意这里使用jQuery的ajax并关闭缓存：
- 定义全局变量：var page = 1; var cacheData = []; var loading = false;
- source函数内判断如果是新关键词则page=1且cacheData=[]
- 请求成功后在response回调里把新数据concat进cacheData，再传给控件
2.1 response回调的正确写法
response选项接收一个函数，参数为event和ui。ui.content就是即将渲染的条目。我们不能每次都给ui.content赋值为单页结果，而应该把累加后的cacheData映射成{label, value}格式再赋给ui.content。这样下拉就不会清空 earlier 页面。
同时要在请求发起前把loading置为true，请求结束置回false，防止滚动事件连续触发多个重复请求。可以用一个提示li显示“加载中”来增强体验。
三、绑定滚动事件触发下一页
Autocomplete提供了open事件，当下拉显示时，我们可以在里面获取面板元素：var $panel = $(".ui-autocomplete"); 然后对它绑定scroll监听。
判断触底的逻辑是：面板滚动高度 + 面板可视高度 >= 面板内容总高度 - 阈值（比如5px）。满足条件且loading为false时，page++并手动调用一次source逻辑。由于source是我们自己写的函数，可以提取成loadData函数供滚动复用。
| 步骤 | 操作 | 注意点 |
|---|---|---|
| 初始化 | 设定page=1, cacheData=[] | 切换关键词要重置 |
| open事件 | 绑定panel的scroll | 只绑一次或用off防重复 |
| scroll触底 | page++并loadData | loading锁避免并发 |
| response | 累加并渲染cacheData | 不要直接替换content |
四、避免常见错误与优化建议
第一，不要给Autocomplete设delay过短，远程分页场景建议delay 300毫秒以上，避免输入过程中频繁发请求。第二，当接口返回空数组时，说明没有下一页了，此时应解除滚动绑定或设定noMore变量，否则会一直发无效请求。
第三，如果后端支持搜词+页码，务必保证同一关键词的分页连续性，不要因排序变化导致重复或遗漏。最后，在移动端上Autocomplete面板高度有限，滚动加载价值更大，但要测试触摸滑动是否顺畅，必要时用CSS固定面板最大高度并开启滚动。
总结来说，jQuery UI Autocomplete的滚动分页并非控件自带，而是通过维护外部页码、累加数据、拦截response以及监听面板滚动来组合实现。掌握这一思路，任何远程分页接口都能平滑接入。
jQuery_UI_Autocomplete远程分页滚动加载修改时间：2026-08-11 13:33:17