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.

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.

  • i'm still getting undefined, when i debug the code from developer console. – Nick Kahn Oct 18 '16 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 Oct 18 '16 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 Kahn Oct 18 '16 at 16:50
  • @NickKahn check the updated answer.It would solve the issue. – Praveen Oct 18 '16 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 Oct 18 '16 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.