Geek Answers Handbook

Angular dropdown - move items in the drop-down list using the keyboard up / down keys

I used the angular drop-down directive in my project. I want to move up / down using the keyboard (up / down keys) through the items in the drop down list. How to achieve this?

+4
source share
2 answers

Can you use selectc optioninstead of a list? the keyboard will work right then.

0
source

AngularUI , "typeahead", . , :

var mod = angular.module('Controller', ['ui.bootstrap']);


mod.controller('SearchCtrl', function($scope, $http) {

  $scope.selected = undefined;
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

});
.typeahead .custom-popup-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  background-color: #f9f9f9;
}
.typeahead .custom-popup-wrapper > .message {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  color: #868686;
}
.typeahead .custom-popup-wrapper > .dropdown-menu {
  position: static;
  float: none;
  display: block;
  min-width: 160px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<html ng-app="Controller">

<body>
  <div class='container-fluid typeahead' ng-controller="SearchCtrl">

    <h4>Search:</h4>
    <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

  </div>
</body>

</html>
Hide result
0

More articles:


All Articles