我正在使用Angular JS-ui.bootstrap.typeahead:
我想单击一个按钮并聚焦于一个输入字段,并自动显示预先输入建议下拉列表。我有一条指令,当单击按钮时,该指令会自动聚焦输入字段。如何自动显示下拉菜单,以便用户可以使用向下箭头或单击来快速选择用户?
我用可编辑的ui-bootstrap JS文件创建了一个Plunker:
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
它包含许多使它起作用的技巧:
.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 }); } } })
一个自定义过滤器比较器函数,当一个参数为secretEmptyKey时始终返回true(显示所有结果):
$scope.stateComparator = function (state, viewValue) {
return viewValue === secretEmptyKey || (‘’+state).toLowerCase().indexOf((‘’+viewValue).toLowerCase()) > -1; };
删除limitTo过滤器以显示所有结果
如果内容太长,则设置max-height和溢出CSS属性以显示滚动条
做完了!