THpubs THpubs - 4 months ago 18
AngularJS Question

Angular auto complete returns a blank list

I'm using AngularJS to create an auto complete. The list of values for auto completion will be provided using json. In my app, when I start typing, I get an empty list. All the values are blank. Here's my view code :

<md-autocomplete flex required
md-input-name="un_registered[vehicle_attributes][brand_name]"
md-no-cache="mainCtrl.noCache"
md-selected-item-chang=""
md-search-text-change=""
md-selected-item="mainCtrl.selectedItem"
md-search-text="mainCtrl.searchText"
md-items="item in mainCtrl.querySearch(mainCtrl.searchText)"
md-item-text="item.display"
md-floating-label="Brand" id="un_registered_vehicle_attributes_brand_name">
<md-item-template>
<span md-highlight-text="mainCtrl.searchText">{{item.display}}</span>
</md-item-template>
<div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
<div ng-message="required">You <b>must</b> have a favorite state.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</md-autocomplete>


Here's my
querySearch
function :

mainCtrl.querySearch = querySearch;

function querySearch(query) {
return $http.get("/panel/all_brands.json")
.then(function(result) {
return result;
});
}


My json data :

["Example Brand","abcdd","Example Brand2Hh","rr","ffff"]


What might be the problem?

Answer

Change 1:

 function querySearch(query) {
    $http.get("/panel/all_brands.json").success(
    function(data, status, headers, config) {
        mainCtrl.TestData = data;
    });
}

Change 2:

md-search-text-change="mainCtrl.querySearch(mainCtrl.searchText)"
md-selected-item="mainCtrl.selectedItem"
md-search-text="mainCtrl.searchText"
md-items="item in mainCtrl.TestData | filter: mainCtrl.searchText"

Change 3:

 <span md-highlight-text="mainCtrl.searchText">{{item}}</span>
Comments