javascript - 预输入中的意外行为 - 这是一个错误吗？

Question

我使用 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" />

这是模板:

<script type="text/ng-template" id="unit-template.html">
    <a tabindex="-1">
        <div class="row">
            <span class="col-md-6 col-sm-6" ng-bind-html="match.model.symbol | uibTypeaheadHighlight:query"></span>
            <span class="col-md-5 col-sm-5 col-md-offset-1 col-sm-offset-1" ng-bind-html="match.model.name  | uibTypeaheadHighlight:query"></span>
        </div>
    </a>
</script>

我的单位收藏有两项:

name=kilogram symbol=kg
name=litre symbol=L

乍一看，我认为预输入效果很好。

但是当我尝试以下组合键时，我发现了一个错误。

案例:1

工作:

当我在 typeahead 中输入 kg 并按 tab 两次时，item.unit 属性具有值:

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

不工作:

但是当我在 typeahead 中输入 kg 并按 esc 然后按 tab 时，item.unit 属性具有值:

kg

案例:2

工作:

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

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

然后，如果我通过选择文本然后使用 delete 或 backspace 键来删除 typeahead 中的文本，那么我会将焦点从 typeahead 移开，然后将 item.unit 移开仍然具有值(value):

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

我还在他们的 github page 上提出了一个问题.

骗子:

以下是重现该问题的 plunker 的链接:https://plnkr.co/edit/FIPANC3CcliNOeHHANxF

Answer 1

我没有发现预先输入的错误

• 在非工作情况 1 中:您实际上是在说取消预先输入(这就是 esc 的作用)，然后您的代码显示显示任何内容绑定(bind)到 input 元素，在本例中就是您输入的任何内容 - “kg”。这是预期的行为(对于给定的代码)。

  换句话说，如果未安装 type-ahead，您将得到完全相同的结果。

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

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

编辑:

要在非工作情况 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:https://plnkr.co/edit/8YsecsgToP8dtwYHbhD4?p=preview