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

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 键删除预先输入的文本，那么如果我将焦点从预先输入的位置移开，那么 item.unit 是

undefined.

不工作：

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

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

然后，如果我通过选择文本然后使用 delete 或 backspace 键来删除预输入中的文本，那么我将焦点从预输入移开，然后是 item.unit仍然有价值：

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

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

Plunker：

这里是重现问题的 plunker 的链接：https://plnkr.co/edit/FIPANC3CcliNOeHHANxF

Answer 1

我没有看到预先输入的错误

• 在 非工作案例 1 中：您实际上是在说取消预先输入（这是 esc 所做的），然后您的代码说显示绑定到input 元素，在这种情况下，它就是您输入的任何内容 - “kg”。这是预期的行为（对于给定的代码）。

  换句话说，如果没有安装预输入，您将得到完全相同的结果。

• 在 非工作情况 2 中，这取决于您在删除后如何离开 - 如果您使用 tab 两次，则预先输入的默认建议为'kg' 所以首先 tab 选择它，然后第二个移动焦点，所以我希望它被设置为 'kg' 对象。但是，如果您在删除/退格后单击其他位置，则该值为空字符串 ''，这也是我所期望的，因为您正在显示绑定到 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