单击文本框时打开自动完成列表

Question

我想在我的 Angular 项目中使用自动完成输入文本框功能。

所以我尝试在输入文本框中使用 typeahead 指令。

这里是模块定义：

(function () {
    "use strict";
    angular.module("damageEvent", ["ui.router",
        "geomindCommon",
        "lookups",
        "ngAnimate",
        "ui.bootstrap"])

        .config([
            "$stateProvider",
            function ($stateProvider) {

                $stateProvider
                  .state("sitesDamages", {
                      abstract: true,
                      url: "/sitesDamages",
                      template: "<ui-view></ui-view>"

                  })
                  .state("sitesDamages.sitesList", {
                      url: "/",
                      templateUrl: "app/damageEvent/templates/sitesDamageEvents.tmpl.html",
                      controller: "sitesDamageEventsController",
                      controllerAs: "list",
                  })
            }
        ]);
})();

这里是控制器定义：

(function () {
    "use strict";

    angular.module('damageEvent').controller("sitesDamageEventsController", [ sitesDamageEventsController]);


    function sitesDamageEventsController() {
        var self = this;

        self.selected = '';
        self.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'];

    }
})();

这里是 HTML 模板：

<div class="container">

        <input type="text"
               typeahead-min-length="0"
               ng-model="list.selected"
               typeahead="state for state in list.states | filter:$viewValue:emptyOrMatch | limitTo:8"
               class="form-control">

    </div>

它在视图中的外观如下：

当我专注于输入文本框并开始在其中打印时，自动完成列表弹出窗口。

但是当输入文本框被点击（聚焦）时，我需要自动完成列表弹出窗口。

我使用 ui-bootstrap 版本版本：0.14.2 和 angularjs 版本 1.4.7。

任何想法是否可以在文本框聚焦时制作弹出自动完成列表？

Answer 1

尝试使用 typeahead-min-length="0"，这个 PR 应该允许这种行为。

编辑 此功能在 1.1.0 版本中可用。