案例：1

Question

我使用typeahead输入如下：

<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

我的单位集合有两个项目：

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

初看起来我认为打字机工作正常。

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

案例：1

工作：

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

kg

无效：

但是当我在typeahead中键入kg并点击 esc 然后点击 tab 时，item.unit属性具有值：

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

案例：2

工作：

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

undefined.

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

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

无效：

当我在typeahead中键入kg并按两次Tab键时，焦点会从控件中消失。现在item.unit属性具有值：

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

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

    <li><a href="#/User">User</a></li>
<div ng-view></div>

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

Plunker：

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

Answer 1

我没有看到提前输入错误

在非工作案例1 中：你实际上是在说取消提前输入（这是 esc 所做的那样）然后你的代码说显示任何是绑定到input元素，在这种情况下只是你输入的内容 - ＆＃34; kg＆＃34;。这是预期的行为（对于给定的代码）。

换句话说，如果未安装预先输入，您将获得完全相同的结果。
在非工作案例2 中，它取决于您删除后的移动方式 - 如果您使用 tab 两次，则type-ahead具有默认值建议选择＆＃39; kg＆＃39;所以首先标签选择它然后第二个移动焦点，所以我希望它被设置为＆＃39; kg＆＃39;宾语。但是，如果您在删除/退格后点击其他位置，那么该值就是空字符串＆＃39;＆＃39;这也是我所期望的，因为您正在显示绑定到的属性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

在typeahead中出现意外行为 - 这是一个错误吗？

案例：1

案例：2

1 个答案: