自动补全功能几乎是所有搜索类页面的标配，jQuery UI Autocomplete凭借配置简单、交互成熟的特点被广泛使用。不过在与远程数据源对接时，如果接口返回了空数组，默认情况下组件会直接收起下拉菜单，用户在输入框里敲了一串字符却看不到任何反馈，很容易误以为页面卡死了。这篇文章就来解决这个问题：当远程数据源没有匹配结果时，如何优雅地显示一条友好的提示信息。
一、先理解Autocomplete处理数据的内部流程
要实现空结果提示，得先弄清楚数据从请求到渲染经过了哪些环节。当我们配置了source为一个URL字符串或函数时，Autocomplete会发起请求拿到原始数据，然后依次经历解析、过滤、响应三个阶段。response事件是整个链条中最后的关键节点，无论数据来自本地数组还是远程接口，最终都会以回调参数的形式传入这个事件，参数就是即将被渲染到下拉菜单的条目数组。
查看jQuery UI源码可以发现，内部有一个_response方法负责收尾，它接收处理完毕的数据后调用_suggest渲染菜单。同时组件会用pending计数器追踪未完成的请求，只有计数归零时response事件才会真正触发，这个设计保证了多个并发请求时不会出现旧结果覆盖新结果的混乱。理解这一点很重要，因为我们的提示方案正是建立在response事件之上，它对本地和远程数据源的行为是一致的。
另一个需要留意的细节是：如果把source配置成URL字符串，组件内部默认会读取返回JSON中的data字段（通过dataType和内部的normalize逻辑）。实际项目中更推荐把source写成一个函数，自己控制请求参数、错误处理和数据格式，灵活度更高，也方便后面做空结果判断。
二、用response事件实现空结果提示
核心思路很直接：监听response事件，检查传入的内容数组，如果长度为0，就往数组里塞一条特殊的“无结果”条目，让菜单照常渲染出来。这条特殊条目需要满足两个条件：一是样式上与普通候选项区分开（比如置灰、不可点击），二是结构上与Autocomplete期望的数据格式兼容。
下面是完整的实现代码：
$(function() {
var NO_RESULT = { noResult: true, label: '未找到匹配的结果', value: '' };
$('#search').autocomplete({
minLength: 2,
source: function(request, response) {
$.ajax({
url: '/api/search',
dataType: 'json',
data: { keyword: request.term },
success: function(data) {
// 无论有没有结果都调用response，交由事件统一处理
response($.map(data, function(item) {
return { label: item.name, value: item.name, id: item.id };
}));
},
error: function() {
// 请求失败时也给出反馈，而不是默默收起菜单
response([]);
}
});
},
response: function(event, ui) {
if (ui.content.length === 0) {
ui.content.push(NO_RESULT);
}
},
select: function(event, ui) {
// 阻止提示条目被选中后污染输入框
if (ui.item.noResult) {
event.preventDefault();
return false;
}
$('#target').val(ui.item.id);
}
});
});这段代码有几个关键点值得展开说明。首先是select回调里的拦截逻辑，如果不加判断，用户用键盘上下键移动到提示条目再回车，“未找到匹配的结果”这几个字就会被填进输入框，体验相当糟糕。event.preventDefault()加上return false可以双重保险地阻止默认写入行为。
其次要注意source函数里response回调的调用时机。无论成功还是失败都必须调用它，否则pending计数器不会归零，后续请求的菜单渲染可能出现异常。很多“第二次输入时下拉菜单不出现”的疑难杂症，根源就是错误分支忘了调用response。
三、让提示条目不可交互并优化样式
只靠select拦截还不够彻底，键盘导航时光标依然会停在提示条目上，鼠标悬停也会有高亮效果，视觉上会误导用户。更完善的方案是通过focus事件阻止提示条目获得焦点，同时给它加上独立的样式类。
$('#search').autocomplete({
// ...其他配置同上
focus: function(event, ui) {
if (ui.item.noResult) {
// 阻止键盘导航时高亮提示条目
event.preventDefault();
return false;
}
},
open: function(event, ui) {
// 菜单展开后，给提示条目加上标记类并移除可点击状态
$(this).autocomplete('widget')
.find('.ui-menu-item-wrapper')
.each(function() {
var $item = $(this);
if ($item.text() === '未找到匹配的结果') {
$item.addClass('ui-state-disabled autocomplete-no-result');
}
});
}
});对应的CSS可以这样写，把提示文字置灰、居中并缩小字号，同时去掉鼠标的手型光标：
.autocomplete-no-result {
color: #999;
font-size: 13px;
text-align: center;
cursor: default;
pointer-events: none; /* 直接屏蔽鼠标交互 */
}
.ui-menu-item.ui-state-disabled .ui-menu-item-wrapper {
pointer-events: auto;
}这里用了pointer-events: none直接让提示条目对鼠标事件完全透明，配合jQuery UI自带的ui-state-disabled状态类，基本能覆盖绝大多数交互场景。需要注意不同版本的jQuery UI菜单DOM结构略有差异，1.12之前的版本菜单项直接是<a>元素，之后改成了带ui-menu-item-wrapper类的内层元素，写选择器时要根据实际版本调整。
四、区分“无结果”与“请求失败”两种状态
实际产品中，“确实没有匹配数据”和“接口挂了”是两种完全不同的场景，给用户的提示也应该不一样。前者是正常业务反馈，后者则需要引导用户重试或稍后再试。可以在source函数里用一个标志位区分状态：
source: function(request, response) {
$.ajax({
url: '/api/search',
dataType: 'json',
data: { keyword: request.term },
success: function(data) {
response($.map(data, function(item) {
return { label: item.name, value: item.name };
}));
},
error: function(xhr, status, error) {
response([{
noResult: true,
isError: true,
label: '查询失败，请检查网络后重试',
value: ''
}]);
}
});
}进一步的话，还可以给失败场景的条目绑定点击重试的逻辑，在open事件里判断isError标记并绑定单击事件，点击后重新触发一次搜索。这种细节处理在弱网环境或移动端场景下能明显减少用户的挫败感。
最后补充一个容易踩的坑：minLength设置得越小，远程请求频率越高，空结果的触发也会越频繁。建议结合防抖处理，或者在search事件里对输入内容做前置校验（比如过滤纯空格），从源头减少无意义的空结果请求，这也是整个方案体验闭环的一部分。
jQuery UI Autocomplete远程数据源空结果提示修改时间：2026-09-13 08:06:29