Select 使用 typeahead 时 onblur 事件期间的值

Question

我有一个简单的 typeahead 用于货币列表。当我开始输入并 select 所需的值（或按 TAB 键）时，所需的值是 selected - 直到此时一切正常。

但是，如果我键入整个单词并单击输入框外而不是 select输入值（onblur 事件），那么即使我输入的值输入匹配过滤器值，selected 范围变量不更新，所以我的输入无效。我想要做的是在 onblur 事件期间覆盖 selected 值。

示例：如果我键入 EUR 而不按 TAB 或 select 从预输入下拉列表中输入 EUR 值，然后在输入外部单击，EUR 文本保留在输入内部，但 selected 值为 undefined。我希望 selected 值保留 EUR 而不是未定义。我使用 $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>

JavaScipt：

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 也不要 select 州），你'会看到 selected 范围变量保持为空

JsFiddle link here.

Answer 1

如果您想 select 模糊输入列表中的第一个结果，那么您可以在 input 字段中设置 typeahead-select-on-blur="true"，如 doc .

typeahead-select-on-blur (Default: false) - On blur, select the currently highlighted match.

Answer 2

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

将此添加到指令中：

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;
                }
            });
        };

Answer 3

找到另一个解决方案 - 将 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 使突出显示的项目在模糊时被选中。

Answer 4

我花了一些时间搜索类似的问题，并进行了大量测试，直到它开始工作。我可以看到答案中有一个解决方案，但我尝试对其进行总结，以便更清楚一些。

预输入部分包括：

<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=selected 值（完整的单词）但也有点奇怪，但重要的是要知道在 typeahead 将 selected 你的值之后它会运行 ng-blur= "checkSelectedValue()" 指令最后所以它会始终检查验证并根据 $scope.selected 值设置您的 $scope.inputValid=true 或 false。

Select 使用 typeahead 时 onblur 事件期间的值

Select value during onblur event when using typeahead

javascript

angularjs

bootstrap-typeahead

angular-ui-bootstrap