jQuery UI Autocomplete：实现无输入显建议及多选后重复唤起列表

嘿，我懂你现在的纠结——既要一聚焦或点击就弹出完整建议列表，又要支持选完之后还能多次唤起列表继续多选，确实容易顾此失彼。看了你现有的代码，核心问题在于只绑定了focus事件，没考虑多选后输入框已有内容时的唤起场景，咱们来调整一下就能搞定：

关键调整要点 #

• 保留minLength: 0：这是无输入就能唤起列表的基础，确保调用search('')时会忽略输入框现有内容，直接返回全部数据源。
• 新增click事件绑定：当输入框已经处于聚焦状态且已有选中内容时，点击它不会触发focus事件，所以得额外绑定click来触发列表唤起。
• 强制搜索空字符串：不管输入框里有没有已选中的项，每次唤起都用search('')触发，确保始终显示完整的建议列表。

修改后的完整代码 #

$(itemInput).autocomplete({ 
  minLength: 0, 
  source: phrases, 
  multiselect: true 
})
// 同时绑定focus和click事件，覆盖所有唤起场景
.on("focus click", function () { 
  // 强制搜索空字符串，确保显示全部建议
  $(this).autocomplete("search", ''); 
})
// 自定义渲染项的逻辑保持不变
.autocomplete("instance")._renderItem = function (ul, item) { 
  console.log(item); 
  let imageFile = item.label.replace(/\s/g, '-').replace(/\//, '').replace(/\./g, '_'); 
  return $("<li>")
    .append("<div>" + "<img class='acImage' src='" + imagePath + imageFile + ".svg'/>" + "<div class='acName'>" + item.value + "</div>" + "</div>")
    .appendTo(ul); 
};

为什么这样能解决问题？ #

1. 双事件覆盖所有场景：focus处理首次进入输入框的情况，click处理已经聚焦但想再次唤起列表的场景（比如选完一个项后，再选另一个）。
2. 不受输入框内容影响：search('')配合minLength:0，不管输入框里有没有已选内容，都会返回全部source数据，不会过滤结果。
3. 不干扰原有多选逻辑：multiselect插件的选中、项添加功能依然正常工作，只是增强了列表唤起的触发条件。

你可以试试这个修改，应该能同时满足两个需求啦！

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