Açısal malzemeyi otomatik tamamlama araştırması gir

Question

'a girin

Bir düğmeyi tıklattığınızda tüm önemli sonuçları uzak sunucudan almak için iyi çalışan bir otomatik tamamladım. Bununla birlikte, sorun otomatik tamamlama çubuğundaki enter işlevselliği ile aynı özelliği uygulamaktır.

Düzenleme: Kullanıcı başka arama kutusunu sadece özetini girdiğinde autosuggest mükemmel sonuç gösteriyor, ben arama metnini toplamak ve yeni bir sayfada tam bir sonuç göstermek istiyorum autosuggest içinde

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-otomatik tamamlama etiketinin içine yönergesi myEnter kullanın.

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

}

ve otomatik tamamlama HTML: Burada

benim değiştirilmiş kodu nedeniyle myEnter kapsamına

<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> 

ana fonksiyonları kapsamındadır yapabilirsiniz Onları örnekte görebileceğiniz gibi çağır.

Answer 2

Sen Aşağıdaki otomatik tamamlama özelliklerini kullanırsanız formu yayında öğeyi seçin Enter tuşuna sahip olabilir:

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