1

How to capture the text user enters in the ui:inputText

tried:

 var searchText = document.querySelector('.searchKey').value;

and tried this as well...

 var searchText = component.find("searchKey").get("v.value");

Component:

<aura:component >
    <aura:attribute name="searchKey" type="String"/>    
    <div>
        <div class="wrapper">
            <ui:inputText aura:id="searchKey" class="searchKey" keyup="{!c.searchKeyChange}" value="{!v.searchKey}" placeholder="Search..."/>
        </div>
    </div>
</aura:component>

Controller:

({
    searchKeyChange: function(component, event) {

        var myEvent = $A.get("e.c:HouseSearchKeyChange");
        var searchText = document.querySelector('.searchKey').value;
        //var searchText = component.find("searchKey").get("v.value");
        myEvent.setParams({"searchKey": document.querySelector(".searchKey").value });
        myEvent.fire();
    }
})

Something has gone wrong. Action failed: c$HouseSearchBar$controller$searchKeyChange [Cannot read property 'value' of null] Failing descriptor: {c$HouseSearchBar$controller$searchKeyChange}. Please try again.

Improve this question

1 Answer 1

Reset to default
5

Since your are binding the ui:inputText to an aura:attribute searchKey. You can directly get the value using component.get("v.searchKey"):

    var searchText = component.get("v.searchKey");

Also, you have to add updateOn="keyup" to the ui:inputText

NOTE: By default aura, updates searchKey attribute when the ui:inputText loses focus(i.e onblur), since you are access value in keyup; we have to explicitly tell aura to update the value when there's keyup event in the ui:inputText.

Improve this answer
6
  • i'm still getting undefined, when i debug the code from developer console.
    – Nick
    Commented Oct 18, 2016 at 16:44
  • @NickKahn you will get undefined for the first time because on keyup the old value was "undefined", try assigning a default value to the searchKey attribute (or) change the event to be based on button click.
    – Rao
    Commented Oct 18, 2016 at 16:47
  • interesting and i did see that .... second time i see the old value so first time i entered 'jo i got undefined second time i entered joh i got jo, what event should I use? in order for that to work
    – Nick
    Commented Oct 18, 2016 at 16:50
  • @NickKahn check the updated answer.It would solve the issue.
    – Praveen
    Commented Oct 18, 2016 at 16:51
  • 1
    @Rao and @NickKahn By default aura, updates searchKey attribute when the ui:inputText loses focus(i.e onblur), since you are access value in keyup; we have to explicitly tell aura to update the value when there's keyup event in the ui:inputText.
    – Praveen
    Commented Oct 18, 2016 at 17:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .