Typeahead in angular js

Question

I am new to angular js. I am trying to implement typeahead for the json data I get: format of json data is like:

$scope.utilstates = [
    { "State": "Florida", "Key": "FL", "Utility": [ "Bartow (City of) Electric", "Clay Electric Co-Op", "Florida Power & Light", "FMG", "Gainesville Regional Utilities", "Gulf Power Company" ] },
    { "State": "Texas", "Key": "TX", "Utility": [ "AEP-Texas (SWEPCO)", "Austin Energy", "Brownsville Public Utilities Board (TX)", "CenterPoint Energy (Reliant - HL&P)"] },
    { "State": "Virginia", "Key": "VA", "Utility": [ "DVP", "NOVEC"] }
];

In the html, I want the user to enter the utility company irrespective of state and should show the matching utility company.

in html, I have this code:

<input type="text" ng-model="query.utility" typeahead="st as st.Utility for st in utilstates | filter:({Utility:$viewValue}) | limitTo:8" class="form-control" placeholder="Utilities">

But I get complete array of values, instead of selected value from the matched array.

Any help would be greatly appreciated.

Plunker link: http://plnkr.co/edit/no0hATW5mHiIbuON6B9E?p=preview

You are using very old version of Angular and AngularUI. Pretty sure this is the problem. — dfsq
– dfsq, Commented Mar 30, 2015 at 17:58
I changed to new version. Still I am getting array of values and not the specific value. — Suresh
– Suresh, Commented Mar 30, 2015 at 18:02

miszczak · Accepted Answer · 2015-03-30 18:41:30Z

1

First of all. The reason why you got array of objects after selecting is that as st.Utility after as keyword you have to provide the expression that will be visible in typeahead prompt and after selecting in text input.

First expression just after for (in your case st) will lead to receive whole object from utilstates instead of desired Utility.

Secondly. You cannot point particular item from nested array in object that is the element of typeahead selection without helper methods and much complicating your code.

My advise is to reconsider the data structure of those Utilities. Maybe instead of array of whole states, make an array of single utilities. For example:

var utilities = [{
    State: "Virginia",
    Key: "VA",
    Name: "AEP-Texas (SWEPCO)"
}//And so on...]

then you can easly go with:

utility as utility.Name for utility in utilities

answered Mar 30, 2015 at 18:41

miszczak

13610 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Suresh Over a year ago

ok. I changed the format of the data structure and I am able to address the problem. But for the state field, I am seeing duplicate values. I tried use 'unique' but it is not working.. Any help?

miszczak Over a year ago

If you have duplicated records across different (for example) states you can create your own promtp template. And display AEP-Texas (SWEPCO) - Virginia and AEP-Texas (SWEPCO) - Texas etc.

miszczak Over a year ago

You used unique filter like this ? | unique:'state'

bigjollygiant14 · Accepted Answer · 2015-03-30 18:23:54Z

0

You could set up a helper function that concatenates all the arrays together in a new $scope array and use:

<input type="text" ng-model="query.utility" typeahead="util for util in Utilities | limitTo:8" class="form-control" placeholder="Utilities">.

The problem is that you need to iterate over the array to get the values instead of the array. For example:

typeahead="st as st.Utility[1] for st in utilstates"

will return the second value in each array. Perhaps there is a better way to do this in the typeahead than the above code, but the above works.

answered Mar 30, 2015 at 18:23

bigjollygiant14

1112 silver badges12 bronze badges

1 Comment

Suresh Over a year ago

moving all utils to a $scope variable was my last option. I was told that, later stage, I need to sort the utils based on State. So the first filter would be state and then use the array of the selected state utilities.

Collectives™ on Stack Overflow

Typeahead in angular js

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related