Implementierung von eckigen Material Autocomplete Suche eingeben

Question

Ich habe eine Auto abgeschlossen, die beim Klicken auf eine Schaltfläche funktioniert gut zum Abrufen aller wichtigen Ergebnisse aus dem Remote-Server. Die Abfrage besteht jedoch darin, dasselbe Feature mit der Funktion "Enter" in der Autocomplete-Leiste zu implementieren.

Edit: Das Autosuggest das Ergebnis perfekt zeigt, mag ich den Suchtext sammeln und das gesamte Ergebnis auf neue Seite zeigen, wenn der Benutzer die Box Suche geht sonst nur die Zusammenfassung in Autosuggest

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

Ihre Richtlinie myEnter innerhalb des md-Autocomplete-Tag.

Hier ist mein modifizierte Code:

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

}

und die automatische Vervollständigung 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> 

Aufgrund des myEnter Umfangs liegt im Rahmen Ihrer Hauptfunktionen können Sie Rufen Sie sie auf, wie Sie im Beispiel sehen können.

Answer 2

Sie können die den auf Formular Post Geben Sie haben Schlüssel auswählen, wenn Sie die folgenden Eigenschaften der automatischen Vervollständigung verwenden:

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