Bootstrap UI中的预输入值

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中有一个打开请求，要求不要自动选择/突出显示第一个项目

一种解决方案是使用到目前为止的查询内容填充第一项 ，因此制表符或输入将仅确认选择当前查询：

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">

在Plunker中的演示

Answer 2

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

这是修改后的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;

我还添加了此功能，该功能会将当前文本放入预输入列表的第一项，并将其作为选定项：

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
  };