CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeionic-framework
user944513
user944513

Reputation: 12729

how to make autocomplete in angularjs (filter list not display )

I am trying to make autocomplete in angular js .But when I type anything on text field it not reflect on view In other word it not give filter list after typing on text field .I have station name and station code .I need to filter my list with filter code. here is my code

http://codepen.io/anon/pen/xGxKKE

When I type "B" it should display the list which have station code started from "B" . could you please tell me where i am doing wrong ?

<ion-content>
     <div class="list">
        <label class="item item-input">
            <span class="input-label">StationName</span>
            <input type="text" ng-model="station.stationCode" class="bdr">
        </label>
        </div>
    <div class="list">
        <li class="item" ng-repeat="station in data.data">{{station.stationName+"-("+station.stationCode+")"}}</li>
    </div>
</ion-content>

Upvotes: 1

Views: 3470

Answers (2)

sirrocco
sirrocco

Reputation: 8055

You weren't actually filtering the list:

http://codepen.io/anon/pen/rVNBOO

Added: 

 $scope.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
    };

and changed ng-repeat:

ng-repeat="station in data.data | filter:station.stationCode:startsWith"

Edit:

The code in startsWith takes the actual value (the stationName in your case) and checks to see if it finds the searched characters at the beginning of the string. If indexOf "your searched string" is === 0 - then the string starts with those characters.

Upvotes: 2

Vijay
Vijay

Reputation: 3023

 <li class="item" ng-repeat="station in data.data | filter:station.stationCode">

This will allow the list to filter based on the content in textbox.

Note: this will work as Contains filter rather than StartsWith.

Upvotes: 0

Related Questions