4

Let's say I have a REST API uri that can search contact list for a name with a wildcard appended at back of the keyword:

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

If I searched for name "john" for example, the returned json would be like this:

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

I'm looking for an AngularJS autocomplete directive that can call to the remote API uri and set ng-model variable to the id but showing name value on the pop-up search result. So the idea is just like a combobox/select, where it has a hidden value and a displayed value.

The reason I need this kind of autocomplete directive because the autocomplete will be put inside a form which when submitted it should send the id value.

Some of autocomplete directives I have tried like angular-macgyver for example, can only set same source value for what it shows on the pop-up and what it set to ng-model.

I have searched everywhere but haven't found it. As you can see from the title of the question, I have difficulty to find out the correct terms and words for this issue.

So anyone know AngularJS autocomplete directives that can give what I want?

null
  • 8,669
  • 16
  • 68
  • 98

2 Answers2

1

I think this directive covers what you need: np-autocomplete

Raeef Refai
  • 1,471
  • 14
  • 26
0

A simple implementation to handle setting both the id and name selection from an autocomplete widget is by using a text field (name) and hidden field (id) to bind to both properties. When selecting the autocomplete option, use the select handler to assign both fields. You can find more information here:

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

ozkary
  • 2,436
  • 1
  • 21
  • 20