角JS - 自动对焦输入，显示预输入下拉 - ui.bootstrap.typeahead [英] Angular JS - Automatically focus input and show typeahead dropdown - ui.bootstrap.typeahead
问题描述
我使用的角度JS - ui.bootstrap.typeahead：
我想点击一个按钮，并集中输入字段，并自动显示预输入建议下拉列表。我有一个指令，单击该按钮时自动对焦的输入字段。我怎么能自动显示下拉菜单，使用户可以使用向下箭头，或点击，快速选择一个用户？
我创建了一个Plunker与修修补补的用户界面，引导JS文件编辑：
<一个href=\"http://plnkr.co/edit/Z79LY0OYlwFc3wirjxol?p=$p$pview\">http://plnkr.co/edit/Z79LY0OYlwFc3wirjxol?p=$p$pview
这是我的全部脚本：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=plunker＆GT;
＆LT; HEAD＆GT;
＆LT;链接HREF =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js\"></script>
＆LT; SCRIPT SRC =UI自举 - 第三方物流企业 - 0.10.0.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;＆LT;脚本＆GT;
angular.module（'plunker'，['ui.bootstrap']）
.directive（'focusMe'，函数（$超时，$解析）{
返回{
//范围：真，//选择创建一个子作用域
链接：功能（范围，元素，ATTRS）{
VAR模型= $解析（attrs.focusMe）;
范围。$腕表（型号，功能（价值）{
如果（价值===真）{
$超时（函数（）{
元素[0]。重点（）;
}）;
}
}）; }
};
}）;
功能TypeaheadCtrl（$范围，$ HTTP）{ $ scope.selected =不确定;
$ scope.states = ['阿拉巴马'，'阿拉斯加，亚利桑那，阿肯色州，加州，科罗拉多，康涅狄格，特拉华州，佛罗里达，乔治亚，夏威夷， 爱达荷，伊利诺伊州，夺宝，衣阿华，堪萨斯州，肯塔基州，路易斯安那州，缅因，马里兰，马萨诸塞州，密歇根州，明尼苏达州，密西西比'，'密苏里'，'蒙大拿州，内布拉斯加州，内华达州，新罕布什尔，新泽西，新墨西哥，纽约，北达科他州，北卡罗来纳，俄亥俄州，俄克拉荷马，俄勒冈州，宾夕法尼亚州，罗得岛，南卡罗来纳，南达科他州，田纳西州，得克萨斯，爵士，佛蒙特州'，'弗吉尼亚'，'华盛顿，西弗吉尼亚州，威斯康星，怀俄明州'];
$ scope.opened = FALSE; $ scope.open =功能（）{
$ scope.opened = TRUE;
}
$ scope.close =功能（）{
$ scope.opened = FALSE;
}
}＆LT; / SCRIPT＆GT;
＆LT; DIV CLASS ='集装箱液'NG控制器=TypeaheadCtrl＆GT; ＆LT; H4＆GT;我怎样才能打开自动预输入下拉按钮时pressed＆LT;？/ H4＆GT;
＆LT; P＆GT;我有一个指令，自动对焦在球场上，但我似乎无法自动显示预输入。即使加向下箭头键点击支持将是巨大的。 ＆LT; BR /＆GT;＆LT; BR /＆GT; ＆LT;按钮类=BTN BTN-默认的NG-秀= NG点击=open（）的＆GT开！;打开输入并显示预输入＆LT;！/按钮＆GT;
＆LT;按钮类=BTN BTN-默认的NG-秀=打开NG点击=关闭（）＆GT;关闭输入＆LT; /按钮＆GT;
＆LT; BR /＆GT;＆LT; BR /＆GT; ＆LT;输入类型=文本
重点-ME =开张
NG-秀=开张
NG-模式=选择
预输入=状态，在状态状态|过滤器：$ viewValue | limitTo：8
类=表格控＆GT;
＆LT; BR /＆GT;
＆LT; pre NG秀=打开＆GT;产品型号：{{选择| JSON}}＆LT; / pre＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
作为HarishR的评论中提到，没有内置此功能的支持呢。
不过，我只是想尝试周围的黑客这里是结果：<一href=\"http://plnkr.co/edit/Qrnat8yTvISuM1qHHDlA?p=$p$pview\">http://plnkr.co/edit/Qrnat8yTvISuM1qHHDlA?p=$p$pview
它包含了很多黑客做的工作原理：
- 包括jQuery的，以便使用.trigger（），可能是与当地JS更换，但我很懒。
- 使用NG-重点调用.trigger（'输入'）用于触发typehead弹出
- 使用NG-修剪=假来禁止输入的值自动修整
-
自定义空预输入指令，与ngModel的控制器应用secretEmptyKey逻辑绕过预输入分钟长度的检查交互：
.directive（'emptyTypeahead'，函数（）{
返回{
要求：'ngModel'，
链接：功能（范围，元素，ATTRS，modelCtrl）{
//这个解析器预输入的解析器之前运行
modelCtrl。$ parsers.unshift（功能（inputValue将）{
VAR值=（？inputValue将inputValue将：secretEmptyKey）; //与secretEmptyKey更换空字符串绕过预输入分钟长度的检查
。modelCtrl $ viewValue =价值; //这个$ viewValue必须inputValue将匹配传递给typehead指令
返回值;
}）; //预输入的分析器之后此解析器运行
modelCtrl。$ parsers.push（功能（inputValue将）{
inputValue的回报=== secretEmptyKey？ ''：inputValue将; //设置secretEmptyKey回空字符串
}）;
}
}
}） -
自定义过滤器比较函数总是返回true（显示所有结果）当一个参数是secretEmptyKey：
$ scope.stateComparator =功能（状态，viewValue）{
返回viewValue === secretEmptyKey || （''+状态）.toLowerCase（）的indexOf（（''+ viewValue）.toLowerCase（））＆GT; -1;
}; -
删除limitTo过滤器以显示所有结果
- 设置最大高度和溢出CSS属性显示滚动条，如果内容太长
完成！
I am using Angular JS - ui.bootstrap.typeahead:
I would like to click a button and focus an input field and automatically show the typeahead suggestion dropdown. I have a directive that automatically focuses the input field when the button is clicked. How can I show the dropdown automatically so the user can use the down arrow, or click, to quickly choose a user?
I have created a Plunker with the ui-bootstrap JS file editable for tinkering:
http://plnkr.co/edit/Z79LY0OYlwFc3wirjxol?p=preview
This is my full script:
<!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>
As HarishR mentioned in a comment, there is no built-in support for this feature yet.
But I just want to try hacking around and here is the result: http://plnkr.co/edit/Qrnat8yTvISuM1qHHDlA?p=preview
It contains a lot of hacks to make it works:
- include jQuery in order to use .trigger(), could be replace with native JS but I'm lazy.
- use ng-focus to call .trigger('input') for triggering the typehead popup
- use ng-trim="false" to disable input's value auto trimming
a custom empty-typeahead directive that interact with the ngModel's controller for applying the secretEmptyKey logic to bypass typeahead-min-length check:
.directive('emptyTypeahead', function () { return { require: 'ngModel', link: function (scope, element, 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 }); } } })a custom filter comparator function that always return true (show all results) when one argument is the secretEmptyKey:
$scope.stateComparator = function (state, viewValue) { return viewValue === secretEmptyKey || (''+state).toLowerCase().indexOf((''+viewValue).toLowerCase()) > -1; };remove the limitTo filter to show all results
- set max-height and overflow css properties to show scrollbar if content is too long
Done!
这篇关于角JS - 自动对焦输入，显示预输入下拉 - ui.bootstrap.typeahead的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
