Implement angular search for autocomplete material on request

Question

I did autocomplete, which when clicked works well to get all key results from a remote server. However, ask to implement the same function with the input functions in the autocomplete panel.

Edit: autoplay shows the result perfectly, I want to collect the search text and show the full result on a new page when the user is still in the search field, just a summary 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

Use your myEnter directive in the md-autocomplete tag.

Here is my modified 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(); } }); }; 

}

and HTML autocomplete:

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

Due to the fact that the myEnter area is included in the scope of your main functions, you can call them, as you can see in the example.

Answer 2

You can have the Enter key to select an element in the form message if you use the following autocomplete properties:

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