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