Angular JS-自动聚焦输入并显示typeahead下拉菜单-ui.bootstrap.typeahead

麻和雅

2023-03-14

问题内容：

我正在使用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

它包含许多使它起作用的技巧：

为了使用.trigger（）包含jQuery，可以用本机JS替换，但我很懒。
使用ng-focus调用.trigger（’input’）触发字体弹出
使用ng-trim =“ false”禁用输入的值自动修整
一个自定义的empty-typeahead指令，可与ngModel的控制器进行交互，以应用secretEmptyKey逻辑来绕过typeahead-min-length检查：

        .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属性以显示滚动条

做完了！

Angular JS-自动聚焦输入并显示typeahead下拉菜单-ui.bootstrap.typeahead

相关阅读

相关文章

相关问答

相关工具

相关文档