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

时间:2015-03-15 20:52:26

标签: javascript angularjs autocomplete

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

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

如果我搜索名字&#34; john&#34;例如,返回的json将是这样的:

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

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

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

我尝试过像angular-macgyver这样的一些自动完成指令,只能为在弹出窗口中显示的内容设置相同的源值设置为ng-model的内容

我到处搜寻但是没有找到它。正如您从问题标题中看到的那样,我很难找到这个问题的正确用语和词语。

所以任何人都知道可以提供我想要的AngularJS自动完成指令吗?

2 个答案:

答案 0 :(得分:1)

我认为该指令涵盖了您的需求:np-autocomplete

答案 1 :(得分:0)

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

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