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

Reputation: 1624

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>

Upvotes: 0

Views: 2650

Answers (2)

Raheel Hasan
Raheel Hasan

Reputation: 6013

All you need is to use ng-model and apply it as a filter in ng-repeat. Rest is done automatically by angularjs.

For example:

<ul>
    <li>
        <input type="text" ng-model="searchString" placeholder="Search" />
    </li>
    <li ng-repeat="item in all_items | filter: searchString">
        <a href="" ng-click="blabla(item.key)">{{item.val}}</a>
    </li>
</ul>

Upvotes: 0

GProst
GProst

Reputation: 10227

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.

Upvotes: 1

Related Questions