Select value during onblur event when using typeah

问题:

I have a simple typeahead for a list of currencies. When I start typing and I select the desired value (or hit TAB on that), the desired value is selected - until this point everything works as desired.

However, if I type the entire word and click outside the input instead of selecting the value (onblur event), then even if the value inside my input matches the filter value, the selected scope variable doesn't update, so my input is invalid. What I'm trying to do is to overwrite the selected value during onblur event.

Example: If I type EUR without hitting TAB or selecting the EUR value from the typeahead dropdown and then click outside the input, the EUR text stays inside the input, but selected value is undefined. I want the selected value to hold EUR instead of undefined. I used $viewValue to send the input value during onblur event.

The 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>

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

In the JsFiddle below you can see the same scenario, except it has US states instead of currencies. Try to type in Alabama then left click outside the input (don't TAB and don't select the state), you'll see that the selected scope variable stays empty

JsFiddle link here.

回答1:

Found another solution - setting both typeahead-select-on-exact and typeahead-select-on-blur attributes to true:

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

Typeahead-select-on-exact makes the exactly matching item automatically highlighted in the list, and typeahead-select-on-blur makes the higlighted item selected on blur.

回答2:

If you want to select the first result from the typeahead list on blur, then you can set typeahead-select-on-blur="true" in your input field as given in the doc.

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

回答3:

Found an answer myself at the time, but forgot to answer my question here.

Added this to the directive:

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

And this is the function:

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