Javascript 仅当显式选择了行时才关闭ui引导typeahead

我创建这个来证明我的问题。如果你在这里，试着输入“五”，然后继续。你的自然反应是输入“五”，然后按tab键，如果你想输入“五百”，你可以向下箭头一次；但是，在这种情况下，您必须键入“五”，然后在不单击任何其他选项的情况下按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>

---

我最终修改了

ui引导程序

，使其按我所希望的方式工作

我在指令中添加了一个

mustMouseDownToMatch

property/attribute，如：

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

我还添加了此功能，它将当前文本放入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
  };

---

这是最近的一种方法，因为我遇到了同样的问题，当时可能没有。

现在可以将其添加为属性

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

在控制器或自定义组件中添加以下选项，允许您现在进行制表操作，如果您在项目上进行制表操作，则可以按enter键进行选择

 self.typeaheadShouldSelect = function($event) {
                if ($event.key === 'Tab') {
                    var e = $.Event('keydown');
                    e.which = 40;
                    $($event.currentTarget).trigger(e);
                }
                if ($event.key === 'Enter') {
                    return true;
                }
            }

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

 self.typeaheadShouldSelect = function($event) {
                if ($event.key === 'Tab') {
                    var e = $.Event('keydown');
                    e.which = 40;
                    $($event.currentTarget).trigger(e);
                }
                if ($event.key === 'Enter') {
                    return true;
                }
            }