javascript - Select value during onblur event when using typeahead - Stack Overflow

admin管理员组

文章数量:1289623

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.

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.

• javascript
• angularjs
• angular-ui-bootstrap
• bootstrap-typeahead

Share Improve this question Follow edited Jun 29, 2016 at 7:42 Toonsylvania asked Jun 28, 2016 at 8:12 ToonsylvaniaToonsylvania 46388 silver badges2323 bronze badges 2

• Do you want to select the first value from the result on blur? – Shashank Agrawal Commented Jun 28, 2016 at 8:14
• Thanks for replying, Shashank. Not necessarily, I want to get the value from the input and process it myself. – Toonsylvania Commented Jun 28, 2016 at 8:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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.

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.

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

I spend some time searching for similar question and made a lot of testing untill I got it working. I can see that in answers there is a solution but I try to summarize it so it could be a bit more clear.

In typeahead part include:

<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" />

First part includes validation function of your scope value (you don't need to pass the value as it's the $scope.selected and you can use it in your controller): ng-blur="checkSelectedValue()". Thus include in your controller:

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

Second part: typeahead-select-on-blur="true"// it's necessary since it first will make $scope.selected=selected value from dropdown (plete word) but also a bit weird, but important to know that after typeahead will selected your value it will run ng-blur= "checkSelectedValue()" directive in the end so there it will always check for validation and will set your $scope.inputValid=true or false depending on $scope.selected value.

本文标签： javascriptSelect value during onblur event when using typeaheadStack Overflow