javascript - 仅当明确选择行时关闭 ui-bootstrap typeahead

Question

我创建了这个 jsBin来证明我遇到的问题。如果你去这里，试着输入“五”然后继续。你的自然 react 是输入“五”，然后按 Tab，如果你想要“五百”，你会向下箭头一次；但是，在这种情况下，您必须键入“五”，然后按 Esc 键或物理鼠标跳出框，而无需单击任何其他选项

所以，基本上，当您使用 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;

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

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