角度材質オートコンプリート - セレクトオンセレクト

Question

誰もが歓迎している（フィドル参照）角度のある素材でこのクールな小さなコントロールを作成しました。基本的に、入力時に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

ちょっと分かりました。私のフォーマッタ "{{item.formatted_address}}"によってフォーマットされる前に、フィールドの変数 "searchText"が2回変化するために起こります。このフィールドは、角度範囲のライブラリで$ 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); 
    }