入力時に角度材料オートコンプリート検索を実装する

Question

ボタンをクリックすると、リモートサーバーからのすべてのキー結果を取得するための自動完了機能が作成されました。ただし、オートコンプリートバーのEnter機能を使用して同じ機能を実装することをお勧めします。

編集：オートサジェストは完全に結果を示している、私は、検索テキストを収集し、ユーザーが選択候補

navbar.htmlでちょうど要約他の検索ボックスに入ったときに新しいページに完全な結果を表示したいです

... 
    <div ng-controller="AppCtrl as ctrl" >  
    <form ng-submit="$event.preventDefault()" style="width: 100%; background: transparent;" ng-controller="gotoSearchLanding"> 
          <md-autocomplete 
           ng-disabled="ctrl.isDisabled" 
           md-no-cache="ctrl.noCache" 
           md-selected-item="ctrl.selectedItem" 
           md-search-text-change="" 
           md-search-text="ctrl.searchText" 
           md-selected-item-change="ctrl.selectedItemChange(item)" 
           md-items="item in ctrl.searchTextChange(ctrl.searchText)" 
           md-item-text="item.name" 
           md-min-length="0" 
           placeholder="Search Data" 
           ng-enter="gotoSearchLandingFun(ctrl.searchText)">> 
           <md-item-template> 
           <span class="item-title"> 
           <img ng-src="img/jobs.png" width="20"> 
           <span> {{item.name}} </span> 
           </span> 
           <span class="item-metadata"> 
           <span class="item-metastat"> 
            <strong>{{item.employee_id}}</strong> 
           </span> 
           <span class="item-metastat"> 
            <strong>{{item.email}}</strong> 
           </span> 
           </span> 
          </md-item-template> 
          </md-autocomplete> 
         </form> 
         <span ng-controller="gotoSearchLanding"> 
         <md-button class="md-fab md-mini" style="background-color:#fff" aria-label="Eat cake" ng-click="gotoSearchLandingFun(ctrl.searchText)"> 
          <ng-md-icon icon="search"></ng-md-icon> 
         </md-button> 
         <span> 
    </div> 

controller.js

/** 
* Auto Search App Controller 
*/ 

angular.module('AppTool') 
    .controller('AppCtrl', [ '$http', '$state', AppCtrl]); 
    function AppCtrl ($http, $state) { 
    var self = this;  
    self.simulateQuery = false; 
    self.isDisabled = false; 
    self.querySearch = querySearch; 
    self.selectedItemChange = selectedItemChange; 
    self.searchTextChange = searchTextChange; 
    function querySearch (query) { 
     var results = query ? self.repos.filter(createFilterFor(query)) : self.repos, 
      deferred; 
     if (self.simulateQuery) { 
     deferred = $q.defer(); 
     $timeout(function() { deferred.resolve(results); }, Math.random() * 1000, false); 
     return deferred.promise; 
     } else { 

     return results; 
     } 
    } 

    function searchTextChange(text) { 
    return $http.get('http://localhost:3000/search', { 
     params: { 
      q: text 
     } 
     }).then(function(response){ 
     return response.data.map(function(item){ 
      return item._source; 
     }); 
     }, function (error) { 
      console.log("error"); 
     }); 
    } 

    function selectedItemChange(item) { 
    } 

    function createFilterFor(query) { 
     var lowercaseQuery = angular.lowercase(query); 
     return function filterFn(item) { 
     return (item.value.indexOf(lowercaseQuery) === 0); 
     }; 
    } 
} 

gotsearchlandingCtrl.js

angular.module('AppTool') 
    .controller('gotoSearchLanding', ['$scope','$state', gotoSearchLanding]); 

function gotoSearchLanding($scope, $state) { 

$scope.gotoSearchLandingFun = function($val) { 
     alert($val); 
     $state.go("searchLanding", { searchVal: $val}); 
    };  
} 

directive.js

angular.module('PdbTool') 
.directive('myEnter', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       scope.$apply(function(){ 
        scope.$eval(attrs.myEnter); 
       }); 
       event.preventDefault(); 
      } 
     }); 
    }; 
}); 

Answer 1

は、MD-オートコンプリートタグ内のあなたのディレクティブmyEnterを使用してください。

directives.myEnter = function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       scope.$apply(function() { 
        scope.gotoSearchLandingFun(scope.searchText); 
       }); 
       event.preventDefault(); 
      } 
     }); 
    }; 

}

とオートコンプリートのHTML：：

<md-autocomplete class="search_box" 
          md-selected-item="selectedItem" 
          md-search-text="searchText" 
          md-items="item in querySearch(searchText)" 
          md-search-text-change="querySearch(searchText)" 
          md-selected-item-change="search(searchText)" 
          md-item-text="item.value" 
          md-min-length="2" 
          md-autofocus="true" 
          md-no-cache="false" 
          placeholder="Search..." my-enter> 
      <md-item-template> 
       <span>{{item.value}}</span> 
      </md-item-template> 
      <md-not-found> 
       No matches found. 
      </md-not-found> 
     </md-autocomplete> 

によりmyEnterスコープにすることができます、あなたの主な機能の範囲内である。ここ

は私の修正コードがありますこの例のように呼び出すことができます。

Answer 2

あなたは、次のオートコンプリートのプロパティを使用する場合、フォームのポスト上の項目を選択し、Enterキーを持つことができます。

md-require-match="true" 
md-select-on-match="true" 
md-match-case-insensitive="true" 
md-selected-item="selectedItem"