多字段jQuery UI自动补全结果添加样式类异常排查

看起来你遇到的问题是自定义的下拉选项样式只作用在了第一个输入框上，这大概率是因为你只给第一个Autocomplete实例重写了_renderItem方法，第二个实例没享受到同样的自定义渲染逻辑。下面给你两种靠谱的解决办法：

方法一：逐个给输入框绑定自定义渲染逻辑 #

如果你的两个输入框是单独初始化的，那只需要在每个输入框的Autocomplete实例上都加上样式类的处理就行。举个例子：

假设你的输入框id分别是#search1和#search2，代码可以这么写：

// 处理第一个输入框
$("#search1").autocomplete({
  source: ["选项1", "选项2", "选项3"] // 替换成你的数据源
}).data("ui-autocomplete")._renderItem = function(ul, item) {
  return $("<li>")
    .addClass("custom-autocomplete-item") // 你的自定义样式类
    .append($("<div>").text(item.label))
    .appendTo(ul);
};

// 处理第二个输入框，逻辑完全一致
$("#search2").autocomplete({
  source: ["选项A", "选项B", "选项C"] // 替换成你的数据源
}).data("ui-autocomplete")._renderItem = function(ul, item) {
  return $("<li>")
    .addClass("custom-autocomplete-item") // 用同一个样式类保证样式统一
    .append($("<div>").text(item.label))
    .appendTo(ul);
};

方法二：全局扩展Autocomplete原型（更高效） #

如果以后可能还要加更多同类型的输入框，直接扩展Autocomplete的原型方法更省心，所有实例都会自动应用这个渲染逻辑：

// 先扩展Autocomplete的默认_renderItem方法
$.ui.autocomplete.prototype._renderItem = function(ul, item) {
  return $("<li>")
    .addClass("custom-autocomplete-item")
    .append($("<div>").text(item.label))
    .appendTo(ul);
};

// 然后用类选择器一次性初始化所有需要Autocomplete的输入框
$(".autocomplete-input").autocomplete({
  source: function(request, response) {
    // 这里写你的数据源逻辑，比如AJAX请求或者本地数组
    response(yourSourceData);
  }
});

额外注意事项 #

1. 确保你的CSS样式优先级足够，避免被jQuery UI的默认样式覆盖：

/* 加上.ui-autocomplete li前缀提升优先级 */
.ui-autocomplete li.custom-autocomplete-item {
  background-color: #f5f5f5; /* 替换成你想要的背景色 */
}
.ui-autocomplete li.custom-autocomplete-item:hover {
  background-color: #e8e8e8; /* hover状态的颜色 */
}

2. 如果你用的是jQuery UI的新版本，注意data("ui-autocomplete")可能需要改成data("autocomplete")，不过大部分版本前者是兼容的。

这样处理后，两个输入框的下拉选项就都会带上你的自定义样式类，背景色也能统一啦！

内容的提问来源于stack exchange，提问作者Kevin H