CODEWITHSUNDEEP
angularjsautocompletetypeahead.js
Tamas Ionut
Tamas Ionut

Reputation: 4410

Angular Typeahead does not trigger on whitespaces

I have the following control defined:

<input                 id="inputSearchMovies"
                       type="search"
                       ng-model="filterItems"
                       placeholder="Search for movies ..."
                       typeahead="prediction for prediction in getPredictions($viewValue) | limitTo:10"
                       typeahead-min-length='1'
                       typeahead-on-select='onSelectPart($item, $model, $label)'
                       typeahead-template-url="customTemplate.html"
                       class="form-control shortInputSearch"
                       style="width: 98% !important" />

This is bootstrapped to the getPredictions function that performs an invocation as I type.

The problem is the typeahead mechanism is not called when I input whitespaces:

How can I fix it to perform a call on each character change (whitespace or not)?

Upvotes: 1

Views: 1263

Answers (1)

CShark
CShark

Reputation: 1622

Your problem is not actually coming from ui-bootstrap, it is coming from the way angular handles inputs. It automatically trims the value of the input, before it sets the value of ng-model. Since the value ends up being the same as it was before (since it's trimmed), it doesn't consider this a change in value and so it doesn't call the ngModelController $parsers, which is what ui-bootstrap uses to trigger its "getMatchesAsync" (or your "typeahead mechanism").

Don't worry though, this functionality can be turned off by using ng-trim like so:

<input typehead... ng-trim="false"></input>

Here it is in angular docs under Arguments ngTrim: https://docs.angularjs.org/api/ng/input/input%5Btext%5D

If set to false Angular will not automatically trim the input. This parameter is ignored for input[type=password] controls, which will never trim the input. (default: true)



I know the title says type=text, but I looked at the angular code and this attribute also applies to type=search. I can show this code if needed.

Upvotes: 2

Related Questions