5

I used angular dropdown directive in my project. I want to move up/down using keyboard( up/down key) through items in list of dropdown. How to achieve this?

ruud
  • 210
  • 4
  • 12
  • My team is having a similar problem. We have a dropdown directive tied to an input box which filters the contents of the dropdown. We need to select an item using the keydown. We don't want to use a select because the list of items is too large. – td-edge Jun 26 '15 at 15:04
  • Good point. Our UX testers cause us major headache because it is almost impossible to find a good Angular dropdown which implements EVERYTHING supported by simple ` – JustAMartin Oct 15 '15 at 13:28
  • Here you can find the solution for this issue. – Ganesan Mani Nov 07 '17 at 09:42

2 Answers2

0

Can you use a select with option's instead of a list ? keyboard would work straight then.

artdias90
  • 735
  • 1
  • 10
  • 18
0

AngularUI has a directive called "typeahead" which addresses this question. Below is a sample I constructed using the library:

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>
td-edge
  • 588
  • 1
  • 6
  • 20