如何在jQuery UI Autocomplete中使用自定义数据数组？

别担心，我来帮你把自定义的members数组整合到Autocomplete插件里，核心是要处理数据源过滤、自定义下拉项显示和选中后的取值逻辑这几个部分。

完整的实现代码 #

直接上可以用的代码，我会逐段解释：

<script>
$(function() {
  $(".autocomplete-2").autocomplete({
    delay: 0,
    minLength: 2,
    autoFocus: true,
    // 重写source，根据输入过滤members数组里的Name字段
    source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(members, function(item) {
        return matcher.test(item.Name);
      }));
    },
    // 当光标聚焦到下拉项时，输入框显示Name，避免显示对象的toString结果
    focus: function(event, ui) {
      $(this).val(ui.item.Name);
      return false;
    },
    // 选中下拉项后的处理逻辑，这里可以按需获取其他字段
    select: function(event, ui) {
      $(this).val(ui.item.Name);
      // 比如你可以把ID、Rating等字段存到隐藏域或者做其他操作
      console.log("选中的用户ID：" + ui.item.ID);
      console.log("用户等级：" + ui.item.Rating);
      return false;
    }
  })
  // 自定义下拉项的显示内容，把Name和Rating一起展示
  .autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
      .append("<div>" + item.Name + "<br><small>等级：" + item.Rating + "</small></div>")
      .appendTo(ul);
  };
});
</script>

关键部分解释 #

• source函数：不再直接传数组，而是通过$.grep过滤members数组，只返回Name字段匹配输入内容的项，用正则保证匹配的安全性。
• focus事件：防止聚焦时输入框显示对象的toString结果，强制显示Name字段。
• select事件：选中后把Name放到输入框，同时可以获取ID、Rating等其他字段做后续处理，比如提交表单时用ID。
• _renderItem方法：重写下拉项的渲染逻辑，把Name和Rating一起显示，让用户能看到更多信息，你也可以加入USCF_Exp等其他字段。

你的members数组可以直接用 #

确保你的members数组在全局作用域（或者在上述代码之前定义），比如：

var members = [ 
  { "Name": "Adeyemon, Murie", "Rating": 1000, "USCF_Exp": "2009-10-10", "ID": 16720664 }, 
  { "Name": "Ahmed, Jamshed", "Rating": 1735, "USCF_Exp": "2019-10-10", "ID": 12537964 }, 
  { "Name": "Attaya, James", "Rating": 1535, "USCF_Exp": "2018-10-10", "ID": 12210580 } 
];

这样就能像Demo里处理projects数组那样，完美适配你的自定义数据啦！

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