Angular JS: enfoca automáticamente la entrada y muestra el menú desplegable de escritura anticipada - ui.bootstrap.typeahead
Estoy usando Angular JS - ui.bootstrap.typeahead:
Me gustaría hacer clic en un botón y enfocar un campo de entrada y mostrar automáticamente el menú desplegable de sugerencias de escritura anticipada. Tengo una directiva que enfoca automáticamente el campo de entrada cuando se hace clic en el botón. ¿Cómo puedo mostrar el menú desplegable automáticamente para que el usuario pueda usar la flecha hacia abajo o hacer clic para elegir rápidamente un usuario?
He creado un Plunker con el archivo JS ui-bootstrap editable para retoques:
http://plnkr.co/edit/Z79LY0OYlwFc3wirjxol?p=preview
Este es mi guión completo:
<!doctype html>
<html ng-app="plunker">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<script src="ui-bootstrap-tpls-0.10.0.js"></script>
</head>
<body>
<script>
angular.module('plunker', ['ui.bootstrap'])
.directive('focusMe', function($timeout, $parse) {
return {
//scope: true, // optionally create a child scope
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
}
};
});
function TypeaheadCtrl($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'];
$scope.opened = false;
$scope.open = function() {
$scope.opened = true;
}
$scope.close = function() {
$scope.opened = false;
}
}
</script>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<h4>How can I open the typeahead dropdown automatically when button is pressed?</h4>
<p>I have a directive that automatically focuses on the field but I can't seem to automatically show the typeahead. Even adding down arrow key click support would be great.
<br/><br/>
<button class="btn btn-default" ng-show="!opened" ng-click="open()">Open Input and show typeahead!</button>
<button class="btn btn-default" ng-show="opened" ng-click="close()">Close Input</button>
<br/><br/>
<input type="text"
focus-me="opened"
ng-show="opened"
ng-model="selected"
typeahead="state for state in states | filter:$viewValue | limitTo:8"
class="form-control">
<br/>
<pre ng-show="opened">Model: {{selected | json}}</pre>
</div>
</body>
</html>