I have created an auto-complete feature that, upon clicking a button, successfully retrieves all key results from a remote server. However, there is a request to implement the same functionality using the enter key on the auto-complete bar.
Edit: The auto-suggest feature displays the results perfectly. I want to capture the search text and display the complete results on a new page when the user enters the search box. Otherwise, only show a summary in the auto-suggest dropdown.
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();
}
});
};
});