Angularjs 自动完成指令，可以将 id 设置为 ng-model 并从搜索结果中显示文本/描述答案

【问题标题】：Angularjs autocomplete directive that can set id to ng-model and show text/description from the search resultAngularjs 自动完成指令，可以将 id 设置为 ng-model 并从搜索结果中显示文本/描述
【发布时间】：2015-05-17 22:20:37
【问题描述】：

假设我有一个 REST API uri，它可以在联系人列表中搜索关键字后面附加通配符的名称：

GET /contact/search?name=<keyword*>

例如，如果我搜索名称“john”，返回的 json 将是这样的：

  [
    {
      "id": "001",
      "name": "John Law"
    },
    {
      "id": "002",
      "name": "Johnny Derp"
    },
    ...
  ]

我正在寻找一个 AngularJS 自动完成指令，它可以调用远程 API uri 并将 ng-model 变量设置为 id，但在弹出搜索结果中显示 name 值。所以这个想法就像一个组合框/选择，它有一个隐藏的值和一个显示的值。

我需要这种自动完成指令的原因是因为自动完成将被放在一个表单中，提交时它应该发送id 值。

我尝试过的一些自动完成指令（例如 angular-macgyver）只能为 它在弹出窗口中显示的内容和 它设置为 ng-model 的内容设置相同的源值。

我到处寻找，但没有找到。从问题的标题可以看出，我很难找到这个问题的正确术语和词语。

所以有人知道 AngularJS 自动完成指令可以提供我想要的吗？

【问题讨论】：

您是否也搜索过ngmodules.org/tags/autocomplete或github.com/search?q=angular+autocomplete？
另见stackoverflow.com/q/18460374/1741542

标签： javascript angularjs autocomplete

【解决方案1】：

我认为该指令涵盖了您需要的内容：np-autocomplete

【讨论】：

【解决方案2】：

处理从自动完成小部件设置 id 和名称选择的简单实现是使用文本字段（名称）和隐藏字段（id）绑定到这两个属性。选择自动完成选项时，使用选择处理程序分配两个字段。您可以在此处找到更多信息：

http://www.ozkary.com/2015/09/angularjs-autocomplete-directive-with.html

【讨论】：