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 ?

Recognizance

Wanted something similar , 3 years after you :D – Accessible

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

Trojan

That's interesting. I was going down the path of clearing it within the select function and then invoking $apply to refresh. This is mch more elegant. I always feel icky invoking the apply or digest – Vasomotor

Ugh. Lame it had to work like this. I was looking at element even. – Support

It's a nice solution, but I'd add value="{{selectedValue}}" there. Without it input would become empty right after the selection (because of asyncSelected = ''), it would look quite strange – Foulup

@JohnDoe The point of the question was to clear the input, in some cases this is needed, it makes it easier on the end user to do quick searching. I personally ran into this when I built an application for my employer where he wanted to quickly search for employee records. So I had the input clear after each search and then had a header tag with the bound result. – Trojan

@Asok Ok, I had a different use-case, so I will not update your answer – Foulup

@Asok Thank you so much for this asnwer. I tried clearing the value inside of the typahead-on-select method but this didn't work for some strange reason... – Horton

@Trojan Your fiddle links not working. Can you please update them. – Lastminute

@rohit Recreated the fiddle. Sorry about that and sorry to get back to you so late – Trojan

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.

Hasseman

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 = '';

Upside

Thanks Reboog711. No that did not work, as in the text is not being cleared from the input element. – Recognizance

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 = '';

Fraught

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.

Realism