在使用 typeahead 时，在 onblur 事件期间选择值

Question

我有一个简单的货币列表typeahead。当我开始输入并选择所需的值（或按下TAB键），所选的值被选中 - 在这一点上，一切都按预期工作。

然而，如果我输入整个单词并在选择值之外单击输入框（onblur事件），即使我的输入框中的值与过滤器值匹配，selected作用域变量也不会更新，因此我的输入框无效。我想做的是在onblur事件期间覆盖所选值。

例如：如果我输入EUR，而没有按TAB或从typeahead下拉菜单中选择EUR值，然后单击输入框之外，EUR文本仍然停留在输入框中，但所选值为undefined。我希望所选的值保持EUR而不是undefined。我使用了$viewValue来在onblur事件期间发送输入值。

HTML代码：

<input type="text" ng-model="selected" typeahead-editable="false" typeahead="currency for currency in currencies | filter:$viewValue" ng-blur="selectCurrency($viewValue)" />
<div>Selected: {{selected}}</div>

JavaScript：

angular.module('myApp', ['ui.bootstrap'])
.controller("mainCtrl", function ($scope) {
    $scope.selected = '';
    $scope.currencies = ['EUR', 'GBP', 'USD'];
    $scope.selectCurrency = function(test) {
        console.log(test); //outputs undefined instead of EUR
        //if (checkIfCurrencyExists(test, $scope.currencies)) { - will do the checks later
        $scope.selected = test;
        //}
    };
});

在下面的JsFiddle中，您可以看到相同的场景，只是它显示的是美国各州而非货币。试着输入 Alabama 然后 左键单击输入框之外的区域 （不要按TAB键，也不要选择该州），您会发现所选范围变量仍为空。

JsFiddle链接在这里。

- Toonsylvania

---

你想在失焦时选择结果中的第一个值吗？ - Shashank Agrawal

感谢回复，Shashank。不一定，我想从输入中获取值并自己处理。 - Toonsylvania

Answer 1

我找到了另一种解决方案 - 将typeahead-select-on-exact和typeahead-select-on-blur属性都设置为true：

   <input typeahead-select-on-exact="true" typeahead-select-on-blur="true" uib-typeahead=...

Typeahead-select-on-exact 会自动将与输入内容完全匹配的项目在列表中高亮显示，而 typeahead-select-on-blur 则会在失去焦点时选择高亮显示的项目。

- Gabi Szilvasy

---

热烈祝贺... +5 掌声 - Salathiel Genèse

Answer 2

如果您想在模糊匹配列表中选择第一个结果，则可以在input字段中设置typeahead-select-on-blur="true"，如doc所示。

typeahead-select-on-blur（默认值：false）- 在失焦时，选择当前高亮匹配项。

- Shashank Agrawal

---

谢谢您的建议。不幸的是，这似乎不能满足我的要求，我已经修改了下面的 JsFiddle 以更好地说明情况。这个例子有美国各州而不是货币。尝试输入 Alabama，然后 鼠标点击输入框外部（不要按 TAB 键，也不要选择该州），您会发现 selected 范围变量保持为空：链接 - Toonsylvania

这个答案适用于当我点击输入框以外的地方吗？ - drizzie

Answer 3

我当时自己找到了答案，但是忘记在这里回答我的问题。

将以下内容添加到指令中：

data-ng-blur="blur($event)"

这是函数：

$scope.blur = function(e) {
            var inputCurrency = e.target.value.toUpperCase();
            angular.forEach($scope.currencies, function(currency) {
                if (currency === inputCurrency) {
                    $scope.field = currency;
                }
            });
        };

- Toonsylvania

---

你好，我使用了你的代码，但它没有起作用。这个代码对你真的有效吗？ - KCN

我尝试了类似的方法，它确实有效，不像KCN的评论所说。我认为这可能不是每个人都很容易理解，也许是因为人们错过了你在其他帖子中提供的链接示例，但它应该得到更多的赞同。 - Nikzin

Answer 4

我花了一些时间搜索类似的问题，并进行了大量的测试，直到解决了它。我看到在答案中有一个解决方案，但我试图总结一下，这样就可以更清楚了。

在typeahead部分包括：

<input type="text" ng-model="selected" typeahead-editable="false" typeahead="currency for currency in currencies | filter:$viewValue" ng-blur="checkSelectedValue()" typeahead-select-on-blur="true" />

第一部分包括您的作用域值的验证函数（您不需要传递该值，因为它是$scope.selected，并且您可以在控制器中使用它）：ng-blur="checkSelectedValue()"。因此，在您的控制器中包含：

$scope.checkSelectedValue = function() {
  if (code that check if $scope.selected in range of allowed values) { 
    $scope.inputValid=true; //you can use this scope or write code that run when selected a correct value
  } else {
    $scope.inputValid=false; 
}};

第二部分：typeahead-select-on-blur="true"// 这是必要的，因为它首先会使$scope.selected=从下拉列表中选定的值（完整单词），但也有点奇怪，但重要的是知道在typeahead选择您的值后，它将最终运行ng-blur="checkSelectedValue()"指令，因此它始终会检查验证，并根据$scope.selected值设置您的$scope.inputValid=true或false。

- Knut Larsen