javascriptangularjsdrop-down-menuangularjs-ng-repeatangular-ui-bootstrap

How to make keypress select in drop down using Angular Js?


I have a drop down where the item size is large so I am looking for a way to enable keyboard-input (key press) so that I can type and it automatically moves to that option in the drop down. Any suggestions?

<ul uib-dropdown-menu role="menu" style="max-height: 150px; overflow-y: auto; max-width : 10px">
  <li ng-repeat="value in feature.values | unknownValueFilter | featureValueOrder ">
    <a ng-click="currentValue.set(value)" href="">
      {{value | featureValueFormatter }}
    </a>
  </li>
</ul>

Solution

  • You may try to use filter on <li> in conjunction with ng-keyup on <ul> for example.

    <ul uib-dropdown-menu role="menu" style="max-height: 150px; overflow-y: auto; max-width : 10px" ng-keyup="onKeyUp($event)">
      <li ng-repeat="value in feature.values | filter: tappedKeys | unknownValueFilter | featureValueOrder ">
        <a ng-click="currentValue.set(value)" href="">
          {{value | featureValueFormatter }}
        </a>
      </li>
    </ul>
    

    And add in your controller:

    $scope.tappedKeys = '';
    
    $scope.onKeyUp = (e)=>{
      $scope.tappedKeys += e.key;
    };
    

    But you should think on how to clear typed value.

    However in any case I would suggest you to decrease your list someway or create visible filter (text input maybe). Otherwise user will barely understand such behavior.