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>
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.