Javascript typeahead中的意外行为-这是一个bug吗？

我有一个使用typeahead的输入，如下所示：

<input type="text" id="unit" name="unit" class="form-control form-input" ng-model="item.unit"
            autocomplete="off" 
            typeahead-min-length="0" 
            uib-typeahead="unit as unit.symbol for unit in units | typeaheadFilter:{'symbol':$viewValue} | orderBy:smartOrder" 
            typeahead-template-url="unit-template.html" />

乍一看，我觉得typeahead很好用

但是当我尝试下面的组合键时，我发现了一个bug

案例：1 工作：

在typeahead中键入kg并按tab键两次时，item.unit属性的值为：

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

kg

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

不工作：

但当我在typeahead中键入kg并单击esc，然后单击tab时，item.unit属性的值为：

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

kg

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

案例：2 工作：

当我在typeahead中键入kg并按tab键两次时，焦点就会离开控件。现在item.unit属性具有以下值：

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

kg

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

然后，如果我使用delete或backspace键删除typeahead中的文本，如果我将焦点从typeahead移开，则item.unit为

undefined.

不工作：

当我在typeahead中键入kg并按tab键两次时，焦点就会离开控件。现在item.unit属性具有以下值：

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

kg

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

然后，如果我通过选择文本并使用delete或backspace键删除typeahead中的文本，则我将焦点从typeahead移开，则item.unit仍具有值：

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

我也提出了一个关于他们的问题

Plunker:

---

这里是指向plunker的链接，它再现了这个问题：

我没有看到前面有输入错误

• 在非工作情况1中：您实际上是在说cancel type ahead（这是esc所做的），然后您的代码说display which is binding to the

  input

  元素，在这种情况下，这就是您键入的内容-“kg”。这是预期的行为（对于给定的代码）
  换句话说，如果没有安装Typeahead，您将得到完全相同的结果

• 在非工作情况2中，这取决于删除后移动的方式-如果您使用tab两次，则“提前键入”会选择默认建议“kg”，因此第一个tab会拾取它，然后第二个会移动焦点，因此我希望将其设置为“kg”对象。但是，如果您在删除/退格后单击其他位置，则值为空字符串“”，这也是我所期望的，因为您正在显示绑定到

  输入的属性
  
  

所以真正的问题是，当这些事情发生时，你希望发生什么

编辑：

要在非工作情况1中返回匹配对象，可以执行以下操作-如果

$scope.unit

未设置为对象，则在离开字段时在数组中执行查找：

$scope.unitLostFocus = function(unit) {
  if (typeof unit !== "object") { // typed text so try to match in our array
    var res = jQuery.grep($scope.units, function(n) {
      return ( n.symbol.toLowerCase() === unit.toLowerCase() );
    });
    if (res.length)
      $scope.unit = res[0]; // first match
    else 
      $scope.unit = undefined; // whatever you want to do here when there's no match
  }
  console.log($scope.unit);
};

---

更新的Plunker:

注意“Kiogram”应该是“kg”如果可能的话创建一个Plunker/fiddle？我认为esc会从输入中移除焦点，那么选项卡的工作方式将与您希望它的工作方式不同。还需要一把小提琴，这样我自己就能看到。@tanmay我用plunker链接更新了我的问题。@praszyk我用plunker链接更新了我的问题。好的。如果您认为typeahead当前的行为很好，那么这不是我的要求。我的要求是：如果我键入kg，然后按esc键，然后按tab键，我希望绑定到输入的变量的值是kg对象，而不是文本kg。第二种非工作情况不能复制。我来看看。我从过去四天就出去工作了。所以，我无法核实你的答案。现在，我检查过了。它很好用。谢谢你的回答。