CODEWITHSUNDEEP
angularjsangular-material
Raju Donthula
Raju Donthula

Reputation: 97

md-autocomplete $http get is not binding data

I am trying to bind data to auto-complete textbox while searching. Below is my code. I can able to get the data from api but it is not binding to textbox.

  <md-autocomplete flex required flex-gt-sm="25"
                             md-input-name="autocompleteField"
                             md-input-minlength="2"
                             md-input-maxlength="18"
                             md-no-cache="noCache"
                             md-selected-item="selectedItem"
                             md-search-text="searchText"
                             md-items="item in querySearch(searchText)"
                             md-item-text="item.Customer_Nm"
                             md-floating-label="Customer">
                <md-item-template>
                    <span md-highlight-text="searchText">{{item.Customer_Nm}}</span>
                </md-item-template>

function querySearch(query) {

    $http({
        url: '/api/GateMoveAPI/GetCustomerData',
        method: 'GET',
        params: { sSearchText: query }
    }).success(function (data, status, headers, config) {

    return data;
});

}

Thanks in advance.

Upvotes: 2

Views: 943

Answers (1)

Aditya Singh
Aditya Singh

Reputation: 16650

Use a $scope property to save states instead of functions. In order to do that you need to trigger your search using md-search-text-change. You can also throttle the search behavior using md-delay. Refer the directive attributes for more details: https://material.angularjs.org/latest/api/directive/mdAutocomplete

Change your code as below:

HTML:

<md-autocomplete flex required flex-gt-sm="25"
                         md-input-name="autocompleteField"
                         md-input-minlength="2"
                         md-input-maxlength="18"
                         md-no-cache="noCache"
                         md-selected-item="selectedItem"
                         md-search-text="searchText"
                         md-items="item in items"
                         md-search-text-change = "querySearch(searchText)"
                         md-item-text="item.Customer_Nm"
                         md-floating-label="Customer">
<md-item-template>
  <span md-highlight-text="searchText">{{item.Customer_Nm}}</span>
</md-item-template>

JS

$scope.querySearch = function (query) {
  $http({
    url: '/api/GateMoveAPI/GetCustomerData',
    method: 'GET',
    params: { sSearchText: query }
  }).success(function (data, status, headers, config) {
    $scope.items = data;
  });
}

Upvotes: 2

Related Questions