Выполнение поиска автозаполнения углового материала на входе

Question

Я сделал автозаполнение, которое при нажатии кнопки хорошо работает для получения всех ключевых результатов с удаленного сервера. Однако попросите реализовать ту же функцию с функцией ввода на панели автозаполнения.

Edit: автозаполнение показывает результат отлично, я хочу, чтобы собрать текст для поиска и показать полный результат на новой странице, когда пользователь вводит в поле поиска еще только резюме в автозаполнении

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

Используйте директиву 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

Вы можете клавишу ВВОД выберите пункт формы пост, если вы используете следующие свойства автозаполнения:

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