带有别名的 jQuery UI 自动完成答案

【问题标题】：jQuery UI autocomplete with aliases带有别名的 jQuery UI 自动完成
【发布时间】：2021-05-27 21:01:01
【问题描述】：

我在表单中使用 jQuery UI 自动完成功能，一切正常（感谢社区）。只剩下一件事可以让它变得完美......别名。

自动填写字段供用户输入其国家/地区。一个自动完成选项是“美利坚合众国”。如果用户输入首字母缩略词“USA”，自动完成程序会将其与“United States of America”值相关联，我该如何做到这一点？

换句话说，当我在列表中定义国家（国家变量）时，有没有办法创建别名？列表：

var countries = [
  "United States of America",
  "United Kingdom",
  // ...
]

非常感谢任何帮助，谢谢

【问题讨论】：

为什么这个问题是 jQuery 论坛上一个 10 多年前的主题的逐字复制？ forum.jquery.com/topic/autocomplete-aliases
因为只有一个答案而且没有帮助。对于人们来说，在 Stackoverflow 上获得这个答案可能会更有用。

标签： jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

一个有别名的解决方案..

var tags = ["United States of America", "United Kingdom", "South Africa", "Albany"];
var alias = ["usa", "uk", "sa", "youpi"];
$("#autocomplete").autocomplete({
  source: function(request, response) {
    var ids = alias.indexOf(request.term);

    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(tags, function(item, i) {
      if(ids == i) return true;
      return matcher.test(item);
    }));    
  }
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>autocomplete</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <label for="autocomplete">Select Something </label>
  <input id="autocomplete">


</body>

</html>

这是一个想法，在您轻松调整代码之后，按照您想要的方式进行操作

【讨论】：