大佬教程收集整理的这篇文章主要介绍了angularjs – 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>
但我只是想尝试黑客，这里的结果是：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属性来显示滚动条，如果内容太长
完成！
以上是大佬教程为你收集整理的angularjs – Angular JS – 自动聚焦输入和显示字体下拉 – ui.bootstrap.typeahead全部内容，希望文章能够帮你解决angularjs – Angular JS – 自动聚焦输入和显示字体下拉 – ui.bootstrap.typeahead所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。