typeahead 中的意外行为 - 这是一个错误吗？

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>

我的单位 collection 有两项：

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

乍一看我认为 typeahead 工作正常。

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

案例：1

工作：

当我在 typeahead 中输入 kg 并点击 tab 两次时，item.unit 属性的值为：

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

不工作：

但是当我提前输入 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 键删除预输入文本，然后我移动焦点远离 typeahead，那么 item.unit 仍然有价值：

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

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

笨蛋：

这是重现问题的 link to plunker：https://plnkr.co/edit/FIPANC3CcliNOeHHANxF

Answer 1

我没有发现提前输入的错误

在非工作情况 1 中：你实际上是在说提前取消输入（这就是 esc做）然后你的代码说显示绑定到 input 元素的任何东西，在这种情况下就是你输入的任何东西 - “kg”。这是预期的行为（对于给定的代码）。

换句话说，如果未安装提前输入，您将获得完全相同的结果。
在非工作情况2中，这取决于您删除后如何移动-如果您使用tab 两次，提前输入默认建议选择 'kg' 所以首先 tab 选择它然后第二个移动焦点，所以我希望它被设置为'kg' 对象。但是，如果您在 delete/backspace 之后单击其他位置，则该值为空字符串 ''，这也是我所期望的，因为您正在显示绑定到 [=11 的属性 =].

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

编辑：

到 return 非工作案例 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

typeahead 中的意外行为 - 这是一个错误吗？

Unexpected Behavior in typeahead - is this a bug?

javascript

typeahead

angularjs

angular-ui-bootstrap

angular-ui-typeahead

案例：1

案例：2