How to clear text from AngularUI typeahead input

Question

I have a typeahead input. The input text is set to the option selected on the typeahead. However, I want to clear this text and display the "placeholder" value again on the text box after I select one of the options from typeahead (because I add the selected value to another div in the selectMatch() method.

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected)" typeahead-min-length="3"
    typeahead-wait-ms="500">

I tried to set the text value and the placeholder value of the Input element using its Id but that did not work, such as these:

// the input text was still the 
$('#searchTextBoxId').attr('placeholder', 'HELLO');

selected result

// the input text was still the selected result
$('#searchTextBoxId').val('');

How can I set or reset the text value ?

Answer 1

I was looking for an answer to this as well, for the longest time. I finally found a resolution that worked for me.

I ended up setting the NgModel to an empty string within the typeahead-on-select attribute:

---

In your typeahead-on-select attribute add asyncSelected = ''; behind your select function, like so:

<input ...
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" />

Making your final typeahead looking something like:

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" 
    typeahead-min-length="3"
    typeahead-wait-ms="500">

---

Fiddle adding each selection to an array

Answer 2

Actually this problem is not from typeahead. It is common issue about ng-model, scope and dot notation.

Refer Scope inheritance in Angular

At your situation, you just change the model name like as xx.selected with dot-notation and set xx.selected empty in typeahead-on-select callback.

Answer 3

To set or reset the value, wouldn't you access the ng-model value, which is asyncSelected according to your code? In a controller:

$scope.asyncSelected = '';

Answer 4

@Asok's answer is fine if you need to immediately clear the value, but for myself, and perhaps others who come here based on the question title, @hey's answer may be better (if terse).

I changed the typeahead as follows:

<input id="searchTextBoxId" type="text" 
    ng-model="myNewVar.asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(myNewVar.asyncSelected)" typeahead-min-length="3"
    typeahead-wait-ms="500">

then, whenever i need to clear the input from my controller, i can call

$scope.myNewVar.asyncSelected = '';

Answer 5

I was already doing as jnthnjns's answer suggested and setting the ng-model's value to an empty string, but the selection popup was not going away because I was (intentionally) using typeahead-min-length="0" so that users could easily see the choices.

It wasn't until I noticed that hitting enter to make a selection actually dismissed the box and it was only on clicks that the box remained. Digging into the ui-typeahead code I saw

// return focus to the input element if a match was selected via a mouse click event
// use timeout to avoid $rootScope:inprog error
if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
   $timeout(function() { element[0].focus(); }, 0, false);
}

As soon as I set typeahead-focus-on-select="false" then the box dismisses immediately upon selection (and clearing of the model). It seems obvious now, but I had seen that option before but had read it as automatically selecting on focus (or something like that). Putting this as an answer, just in case it helps someone else.