md-items 未在 md-autocomplete Angular Material 中正确更新建议列表 [英] md-items is not updating the suggesion list properly in md-autocomplete Angular Material

问题描述

我正在使用 md-autocomplete，因为 md-items 没有正确更新从服务主机 - Ajax 调用获取的响应列表.

I'm using md-autocomplete, in that md-items which is not updating the response list properly which is obtained from the Service Host - Ajax Call.

HTML 源代码

<md-autocomplete flex required
    md-input-name="autocompleteField"
    md-no-cache="true"
    md-input-minlength="3"
    md-input-maxlength="18"
    md-selected-item="SelectedItem"
    md-search-text="searchText"
    md-items="item in querySearch(searchText)"
    md-item-text="item.DisplayName" Placeholder="Enter ID" style="height:38px !important;">
    <md-item-template>
        <span class="item-title">
            <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.ID}} </span>
            <span> - </span>
            <span md-highlight-text="searchText"  md-highlight-flags="^i"> {{item.Description}} </span>
        </span>
    </md-item-template>
</md-autocomplete>

AngularJS 脚本

AngularJS Script

//bind the autocomplete list when text change
function querySearch(query) {
    var results = [];
    $scope.searchText = $scope.searchText.trim();
    if (query.length >=3) {
        results = LoadAutocomplete(query);
    }
    return results;
}

//load the list from the service call
function LoadCPTAutocomplete(id) {
    TestCalculatorService.searchAutocomplete(id).then(function (result) {
        if (result.data != null) {
            $scope.iList = result.data;
        } else {
            $scope.iList = [];
        }
    });
    return $scope.iList;
}

我正在从服务主机获取自动完成列表.我得到了正确的响应，但它没有在 UI 中正确更新.

I'm getting the autocomplete list from the Service Host. I'm getting the response properly, but it does not update in the UI properly.

屏幕截图 1:

这里我正在搜索 8224，但它显示了 822 的结果.我在 Firebug 中调试了这个问题，见上面显示的屏幕截图，请求是针对搜索词 8224 发送的，我得到了两个匹配项作为 JSON 对象的响应，显示在在屏幕截图 2 下方

Here I'm searching for 8224 but it shows the result for 822. I debugged the issue in Firebug, see the above Screen shot it shows, the request was sent for the search term 8224 and I got the response of two matching items as a JSON Object, which is shown in the below Screen Shot 2

在UI中，显示结果为82232、82247、82248、82270.但实际上Service返回的是82247和82248.

In UI, it shows the result 82232, 82247, 82248, 82270. But actually Service return is 82247 and 82248.

如何为 Angular Material md-autocomplete 更新 UI 中的项目源?请帮助我.

How to update the Item-source in UI for Angular Material md-autocomplete? Kindly assist me.

支持性问题发布在以下链接 手动调用 $scope.$apply 在 ajax 调用中引发错误 - 错误:[$rootScope:inprog]

Supportive Question was posted in the following link Manually call $scope.$apply raise error on ajax call - Error: [$rootScope:inprog]

推荐答案

以下帖子中标记的答案符合要求.$http 问题 - 在 md-autocomplete Angular Material 中解决承诺之前无法返回值

The Answer Marked in the following post is Correct as per the requirement. $http issue - Values can't be returned before a promise is resolved in md-autocomplete Angular Material

• .then() - Promise API 的全部功能，但稍显冗长
• .success() - 不返回承诺，但提供更方便的语法

不要使用 .success()，使用 .then 在 UI 中获取更新的结果...

Don't use .success(), use .then to get the updated result in the UI...

这篇关于md-items 未在 md-autocomplete Angular Material 中正确更新建议列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！