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

Question

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>

Id recommend setting up a fiddle, be happy to take a look at it then. — alphapilgrim
– alphapilgrim, Commented Jan 5, 2017 at 22:56
Are you basically looking for an incremental search like codepen.io/hiisi13/pen/IfrDE or embed.plnkr.co/EAMPqJ ? Neither of which are my work by the way. — Caltor
– Caltor, Commented Jan 6, 2017 at 0:39
@alphapilgrim plnkr.co/edit/9rpuHzlZ1gSMd3fHHxHP?p=preview Tried the suggestion given by GPost but still not working — user3407267
– user3407267, Commented Jan 6, 2017 at 7:52

GProst · Accepted Answer · 2017-01-06 00:36:29Z

1

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.

edited Jan 6, 2017 at 0:36

answered Jan 6, 2017 at 0:30

GProst

10.3k3 gold badges28 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3407267 Over a year ago

@GPost : I tried like you mentioned but not seeing it happens.

user3407267 Over a year ago

@GPost : plnkr.co/edit/9rpuHzlZ1gSMd3fHHxHP?p=preview but still its not working

GProst Over a year ago

You have to use ng-repeat on <li> node and use filter on it to see some effect

user3407267 Over a year ago

Figured it out. Thanks :) but once I select when I try to select again the options are resetting back. Can you suggest me a way to clear up ? I am new to angular. Would much appreciate if you let me know what should I use to clear the pressed keys

GProst Over a year ago

@user3407267, my suggestion is in looking for another way:) It's better for user to see the filter. Otherwise you may try to use $timeout() in onKeyUp() callback, in which you will set early defined variable to true clearFlag = true. Then each time you're in onKeyUp() check for the flag: if (clearFlag === true) {$scope.tappedKeys = ''}. Figure out others steps by yourself=)

|

Raheel Hasan · Accepted Answer · 2023-09-20 09:54:02Z

0

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>

answered Sep 20, 2023 at 9:54

Raheel Hasan

6,0634 gold badges47 silver badges75 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related