Question

我正在使用AngularJS和Bootstrap UI开发应用程序。我一直在摸索使用Bootstrap UI中的Typeahead控件。

我的挑战是我希望用户可以选择一个项目，但不是必须这样做。例如，现在，如果您在文本字段中输入Test并按“Enter”，Test将替换为Alpha。但是，我真的想使用Test。我想要替换文本的唯一时间是有人从下拉列表中选择项目。我的标记如下所示：

<input type="text" class="form-control" placeholder="Search..."
       ng-model="query"  
       typeahead="result as result.name for result in getResults($viewValue)"
       typeahead-template-url="result.html" />

如何为用户提供选择项目的选项，但允许他们仍然输入自己的文字？

Answer 1

问题是， Enter 和 Tab 确认选择当前突出显示的项目，并且Typeahead 自动选择项目开始输入。

如果需要，您可以点击控件以失去焦点，或点击 Esc 退出预先输出，但这些可能很难与您的用户沟通。

在Bootstrap Ui中有not auto select / highlight the first item
的打开请求
一个解决方案是populate the first item with the contents of the query thus far，因此标签或输入只会确认当前查询的选择：

<强>的JavaScript ：

angular.module('plunker', ['ui.bootstrap']) .filter('concat', function() { return function(input, viewValue) { if (input && input.length) { if (input.indexOf(viewValue) === -1) { input.unshift(viewValue); } return input; } else { return []; }};})

HTML ：

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8 | concat:$viewValue" class="form-control">

Demo in Plunker

Answer 2

我遇到了同样的情况，发现没有好的答案，所以我自己在ui-bootstrap Here中实施了相关的答案。这可能不是最好的选择，但确实可以完成工作。它使输入中的第一个结果成为您当前正在输入的内容，因此如果您选择或输入它，则选择它 - 您必须向下箭头或选择其他选项才能获得它。

Here是修改后的ui-bootstrap-tpls.js文件

我在指令中添加了mustMouseDownToMatch属性/属性，如：

<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue" typeahead-arrow-down-to-match="true">

和javascript：

var mustArrowDownToMatch = originalScope.$eval(attrs.typeaheadArrowDownToMatch) ? originalScope.$eval(attrs.typeaheadArrowDownToMatch) : false;

我还添加了这个函数，它将当前文本放入typeahead列表的第一个项目，并使其成为所选项目：

var setFirstResultToViewValue = function (inputValue) {
        scope.matches.splice(0, 0, {
        id: 0,
        label: inputValue,
        model: inputValue
    });
}

在typeahead指令的getMatchesAsync调用中调用它：

var getMatchesAsync = function(inputValue) {
// do stuff
    $q.when(parserResult.source(originalScope, locals)).then(function(matches) {
        // do stuff
        if (matches.length > 0) {
             // do stuff
        }
        if (mustArrowDownToMatch) {
            setFirstResultToViewValue(inputValue);
            scope.activeIdx = 0;
            setTypeaheadPosition();
        }
        // do stuff
  };

Bootstrap UI中的Typeahead Value

2 个答案:

Demo in Plunker