我使用的Angular JS – ui.bootstrap.typeahead：
我想点击一个按钮，并集中一个输入字段，并自动显示前瞻性建议下拉列表。我有一个指令，当按钮被点击时自动聚焦输入字段。如何自动显示下拉菜单，以便用户可以使用向下箭头或点击快速选择用户？
我创建了一个Plunker与ui-bootstrap JS文件可编辑修补：
http://plnkr.co/edit/Z79LY0OYlwFc3wirjxol?p=preview
这是我的完整脚本：
<!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>
正如HarishR在评论中提到的，这个功能还没有内置的支持。
但我只是想尝试黑客，这里的结果是：http://plnkr.co/edit/Qrnat8yTvISuM1qHHDlA?p=preview
它包含许多黑客，使其工作：
> include jQuery为了使用.trigger()，可以替换为原生JS，但我很懒。
>使用ng-focus调用.trigger(‘input’)来触发标题弹出窗口
>使用ng-trim =“false”禁用输入值自动修整
>一个与ngModel控制器交互的自定义empty-typeahead指令，用于应用secretEmptyKey逻辑以绕过typeahead-min-length检查：
.directive('emptyTypeahead',function () {
return {
require: 'ngModel',link: function (scope,attrs,modelCtrl) {
// this parser run before typeahead's parser
modelCtrl.$parsers.unshift(function (inputValue) {
var value = (inputValue ? inputValue : secretEmptyKey); // replace empty string with secretEmptyKey to bypass typeahead-min-length check
modelCtrl.$viewValue = value; // this $viewValue must match the inputValue pass to typehead directive
return value;
});
// this parser run after typeahead's parser
modelCtrl.$parsers.push(function (inputValue) {
return inputValue === secretEmptyKey ? '' : inputValue; // set the secretEmptyKey back to empty string
});
}
}
})
>一个自定义过滤器比较器函数，当一个参数是secretEmptyKey时总是返回true(显示所有结果)
$scope.stateComparator = function (state,viewValue) {
return viewValue === secretEmptyKey || (''+state).toLowerCase().indexOf((''+viewValue).toLowerCase()) > -1;
};
>删除limitTo过滤器以显示所有结果
> set max-height和overflow css属性来显示滚动条，如果内容太长
完成！
