只有在明确选择了行时，才能使用tab-off ui-bootstrap typeahead

Question

我已创建此jsBin来证明我遇到的问题。如果你去这里，尝试键入“五”并继续。你的自然反应是键入“Five”然后按Tab键，如果你想要“Five-Hundred”，你就会向下箭头一次;但是，在这种情况下，你必须输入“Five”，然后按下escape或物理鼠标开箱即可，而不点击任何其他选项

所以，基本上，当你使用typeahead时，如果你当前的标准至少有一个匹配的结果，按Tab键会选择它。我预期的行为是，当您键入时，当前所选的选项正是您正在键入的内容，如果您想要其中一个结果，则必须向下箭头一次或多次。

以下是jsBin中的代码：

<div ng-controller="TestController">
  <div>
    {{selected}}
  </div>
  <input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue">
</div>

JavaScript：

var app = angular.module('app', ['ui.bootstrap'])

.controller('TestController', function($scope) {
  $scope.typeaheadOptions = [
    'One','Two','Three','Four','Five-Hundred','Fifteen','Fourteen','Fifty','Six','Seven','Eight','Nine','Ten'
  ]
});

Answer 1

我最终修改了ui-bootstrap以便按照我想要的方式工作。

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

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

和javascript：

var mustMouseDownToMatch = originalScope.$eval(attrs.typeaheadMouseDownToMatch) ? originalScope.$eval(attrs.typeaheadMouseDownToMatch) : false;

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

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

    // set the selected item to the first item in the list, which is this guy
    scope.activeIdx = 0;
}

在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 (mustMouseDownToMatch) {
            setFirstResultToViewValue(inputValue);
        }
        // do stuff
  };

Answer 2

自从我遇到同样的问题，也许那时还不可用，这是一种更新的方法。

您现在可以将其添加为属性

 while (!(readMessage.contains(';'))){
        /*my code*/
 }

在您的控制器或自定义组件中添加以下内容，这将使您现在可以进行制表，并且如果在该项目上进行制表，则可以按Enter键将其选中。

typeahead-should-select="$ctrl.typeaheadShouldSelect($event)"