Question

我已经在Angular Material中创建了这个很酷的小控件，欢迎任何人使用（参见小提琴）。它基本上是一个Angular Material的自动填充字段，可在您键入时使用Google的地理定位服务。由于没有延迟指令，我只添加特殊代码，仅在用户在700ms后停止输入时进行搜索。

我的问题是 - 为什么MD-Autocomplete会在选择项目后立即触发查询事件？

这是HTML：

<md-autocomplete flex style="width: 50%; margin: auto; padding-top: 10em" 
    md-no-cache="false"
    md-selected-item="ctrl.orig_loc"
    md-search-text="ctrl.orig_loc_query"
    md-items="item in querySearch(ctrl.orig_loc_query)"
    md-selected-item-change="selectedItem(ctrl.orig_loc)"
    md-item-text="ctrl.orig_loc.formatted_address"
    md-floating-label="Type address or location name">

    <span md-highlight-text="">{{item.formatted_address}}</span>
</md-autocomplete>

这是JS querySearch函数：

// this is called every time a user types a character AND when item is selected... for some odd reason
$scope.querySearch = function(query) {
    var deferred = $.Deferred();

    // clear old request if something typed within 700ms
    if (locQuery) {
        clearTimeout(locQuery);
    }
    // run the query in 700ms. it will be cleared if the user types within 700ms
    locQuery = setTimeout(function() {
        // call google's geocoder
        geocoder.geocode({
            'address': query
        }, deferred.resolve);
    }, 700);

    return deferred.promise().then(function(response) {
        return response;
    });
};

这是小提琴： https://jsfiddle.net/NeoSHNIK/jgpgv4Ls/3/

同样，问题是 - 在您做出选择之后，它会进行另一次搜索......为什么？

Answer 1

我有点想通了。它的发生是因为该字段的变量＆＃34; searchText＆＃34;在格式化程序＆＃34; {{item.formatted_address}}＆＃34;格式化之前更改两次。这个字段由$ scope。$ watch在angular-material库中观看。所以每次改变时 - 都会调用handleSearchText（）进行搜索。所以相反，他们应该真正添加一个＆＃34;延迟＆＃34;这个概念可以解决我的问题以及解决远程搜索的问题（不想搜索用户输入的每个字符）。为自动完成控件添加延迟会很不错。但是现在我只修改了角度材质库，它完成了工作：

  function configureWatchers () {
    var wait = 700; //MY HACK
    $attrs.$observe('disabled', function (value) { ctrl.isDisabled = $mdUtil.parseAttributeBoolean(value, false); });
    $attrs.$observe('required', function (value) { ctrl.isRequired = $mdUtil.parseAttributeBoolean(value, false); });
    $attrs.$observe('readonly', function (value) { ctrl.isReadonly = $mdUtil.parseAttributeBoolean(value, false); });
    $scope.$watch('searchText', wait ? $mdUtil.debounce(handleSearchText, wait) : handleSearchText);
    $scope.$watch('selectedItem', selectedItemChange);
    angular.element($window).on('resize', positionDropdown);
    $scope.$on('$destroy', cleanup);
  }

角度材料自动完成 - 搜索选择

1 个答案: