角度材料自動完成 - 在選擇上進行搜索

我已經在角度材料中創建了這個很酷的小控件，歡迎任何人使用（請參閱小提琴）。它基本上是一個Angular Material的自動填充字段，可在您輸入時使用Google的地理位置服務。由於沒有延遲指令，因此我添加了特殊代碼以僅在用戶停止輸入700毫秒後才進行搜索。角度材料自動完成 - 在選擇上進行搜索

我的問題是 - 爲什麼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/

再次，問題是 - 你做出選擇之後，，它會做另一個搜索...爲什麼？

來源

2016-05-23 NeoSHNIK

我有點想通了。它的發生是因爲字段的變量「searchText」在我的格式化程序「{{item.formatted_address}}」格式化之前更改了兩次。此字段正在由角度材料庫中的$ scope。watch監視。所以每次它改變 - 他們調用handleSearchText（）來進行搜索。因此，他們應該真的添加一個「延遲」的概念來解決我的問題，並解決遠程搜索問題（不想搜索用戶類型的每個字符）。向自動完成控件添加延遲會很好。但現在我只是修改角材料庫，它完成了工作：

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); 
    }

來源

2016-05-25 21:02:55 NeoSHNIK

角度材料自動完成 - 在選擇上進行搜索

回答

相關問題