0

I'm using the getbootstrap typeahead to populate an input value. I've setup everything so that the user has to pick something from this list:

<input type="text" class="form-control" id="birdname" ng-model="birdname" required ng-disabled="checked" autocomplete="off" placeholder="Check the box if you don't know!" 
                uib-typeahead="bird for bird in birds | filter:$viewValue | limitTo:8" typeahead-no-results="noResults"
                uib-tooltip="Pick a bird or check the box if unsure!"
                tooltip-placement="top-right"
                tooltip-trigger="mouseenter"
                tooltip-enable="!birdname">
        </div>
        <div ng-show="noResults">
          <i class="glyphicon glyphicon-remove"></i> No Results Found - Please Try Again!
        </div>

As you can see, the user has to pick something from this list or the validation won't allow it, though I am having one issue: If the user starts typing and is typing a birdname that exists (list showing with birds on input), but then clicks out of the input with his mouse. typeahead accepts this as 'correct' even though the full name hasn't been picked.

Is there a fix to this?

If you didn't understand what I mean, the following picture should hopefully explain it:

Error

Is there a solution to this? For example, it picking the first option in the list when clicked?

Improve this question
4
  • Typeahead is for another tasks.. For your needs use angular-ui.github.io/ui-select Commented Jun 5, 2016 at 17:31
  • 1
    There is a typeahead-select-on-blur option for the uib-typeahead directive which on blur will select the currently highlighted match (documentation). Commented Jun 5, 2016 at 17:32
  • @Max How is typeahead not mean for this? Commented Jun 5, 2016 at 17:36
  • @Pieter Thanks peter, that did the trick! Exactly what I needed. When clicked out of the field, it selects the first one. Commented Jun 5, 2016 at 17:36
Related questions
3426
AngularJS: Service vs provider vs factory
2051
How does data binding work in AngularJS?
1318
How do I access the $scope variable in browser's console using AngularJS?
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.