<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="mapp">
<div ng-controller="mctrl">
{{name}}
<br />
<br />
<div>
Please search a continent's name:
<input type="text" id="sip" ng-change="changeinprg=true" ng-model="info.name" ng-keydown="action($event)" ng-blur="assignFirstValue()" tabindex="1" />
<ul name="suggestionList" ng-show="items.length && info.name.length && changeinprg">
<li
ng-class="{focusedli:$index==$parent.selI,listpointer:true}" ng-repeat="item in (filtereditemlist= (items|filter:info.name))"><span ng-click="assignValue(item)">{{item.name}}</span></li>
</ul>
<br/>
Enter your feedback about <b>{{info.name}}</b> <input type="text" tabindex="2">
<br/>
</div>
</div>
</body>
</html>
// Code goes here
var mapp = angular.module("mapp", []);
mapp.controller('mctrl', function($scope) {
jQuery(document).mousedown(function(e) {
// The latest element clicked
clicky = $(e.target);
if ((jQuery(clicky).is("span"))) {
$scope.listnav = true;
$scope.$apply();
} else {
$scope.listnav = false;
$scope.$apply();
}
});
jQuery(document).mouseup(function(e) {
clicky = null;
});
$scope.changeinprg = false;
$scope.name = "Auto suggest List";
$scope.selI = 0;
$scope.action = function(event, listlegth) {
if (event.keyCode == 40) {
$scope.selI < $scope.filtereditemlist.length - 1 && $scope.selI++;
} else if (event.keyCode == 38) {
$scope.selI > 0 && $scope.selI--;
} else if (event.keyCode == 13) {
$scope.assignValue($scope.filtereditemlist[$scope.selI]);
$scope.selI = 0;
};
};
$scope.assignFirstValue = function() {
if (!$scope.listnav && ($scope.info.name.length && $scope.changeinprg)) {
$scope.assignValue($scope.filtereditemlist[$scope.selI], true);
$scope.selI = 0;
}
}
$scope.assignValue = function(item, nofocus) {
$scope.info = angular.copy(item);
$scope.changeinprg = false;
$scope.listnav = false;
if (!nofocus)
jQuery("#sip").focus();
};
$scope.listnav = false;
$scope.info = {
name: "Asia"
};
$scope.items = [{
name: "Asia"
}, {
name: "Africa"
}, {
name: "North America"
}, {
name: "South America"
}, {
name: 'Antarctica'
}, {
name: 'Europe'
},
{
name: 'Australia'
}];
$scope.autosuggest = $scope.items.length && $scope.info.name.length;
});
/* Styles go here */
.focusedli{
color:grey;
}
.listpointer{
cursor:pointer
}
Key binded auto suggestion list POC in AngularJS.
Below are steps to search and select a result from the autosuggestion list using keyboard.
1: Enter a value in the first text feild
2: The suggestion list appears below the text box.
3: Up and Down key are used to navigate between items in the list.
Selected item appears in gray color.
4: Press Enter key to select an item from the list.
5: Press tab to move to second feild.
6: You can also use mouse to select one item from the list