function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Bryant Daniels 46Bryant Daniels 46 

Lightning Input Type Search

Hello I am using the Search input from the lightning input components.
<div onkeyup="{! c.handleKeyUp }"> <lightning:input aura:id="enter-search" name="enter-search" label="Search when user hits the 'enter' key" type="search" />

When I am implementing it this is fine, the problem i am having is how would i clear the contents or have a event fire when you click the "Clear Icon" that is built in the component. 
 
Alain CabonAlain Cabon
Hi,

Use oninput moreover.

User-added image

The clear button (cross) should be at the end of line automatically.
  
<aura:attribute name="myEnterSearch" type="String"/>
    <div oninput="{! c.handleInput}"  onkeyup="{! c.handleKeyUp}"  style="width:300px">
        <lightning:input
            aura:id="enter-search"
            name="enter-search"
            label="Search when user hits the 'enter' key"
            type="search"
            value="{!v.myEnterSearch}"
        />       
    </div>
  
   handleKeyUp : function (cmp, event, helper) {
        alert('handleKeyUp:' + event.which);
        if (event.which == 13){
            alert('handleKeyUp: enter button');
        }
    },
    handleInput : function (cmp, event, helper) {
        var entersearch = cmp.get("{!v.myEnterSearch}");
        var messageempty = (entersearch ===""?" empty":"") ;
        alert('handle Input: ' + entersearch + messageempty );
        
    },

 
Bryant Daniels 46Bryant Daniels 46
HI Alain,

Thank for that, this solution wouldn't work for me as I am using this search as a TypeAhead, so i need to call that function on every keyup input, as the oniput seems to do the same, it would be nice if i could just isolate the icon, but I'm not sure that I can get to it. I will more than likely just use a lightning: input of type text and add the lightning:icon with it along with some CSS. 
Alain CabonAlain Cabon
Hi Bryant,

This solution works fine for me and it is standard.
If you don't provide your code or context, very few people will help you now on this forum (old question of May 1).

You can try this forum https://salesforce.stackexchange.com/  more successfully. 

I don't know what is a "search as a TypeAhead" (?) for example.
Bryant Daniels 46Bryant Daniels 46
Hi Alain,

Thanks for the link and I will def check out that link but what I am saying is that I am using the Lightning: input of type search as a typeahead or some people call it lookup,  so for example if I type in the search input field "Gra" it will produce all records that are like "Gra" of a particular record. This works just fine for me except that if I want to use that clear button icon that comes with the component I have no way of just clicking that.  
Cmp:
<div onkeyup="{!c.onChangeSearchText}">

        <lightning:input aura:id="searchKnowledgeInput" name="searchKnowledgeInput" label="" type="search" placeholder="Search Knowledge"
            isLoading="{! v.issearching }" />
    </div>

Controller:
onChangeSearchText: function (component, event, helper) {
        helper.onChangeSearchTextHelper(component, event);
    },

helper:
onChangeSearchTextHelper: function (component, event) {
    
        var searchInput = component.find("searchKnowledgeInput").get("v.value");
        if(searchInput.length > 2){
            if ($A.util.isUndefinedOrNull(searchInput)) {
                searchInput = '';
            }
            var searchResult = [];
            var objectlist = [];
            var retrieveOptions = component.get("c.getAllKnowledgeArticles");
            retrieveOptions.setParams({searchTerm: searchInput});
            retrieveOptions.setCallback(this, function (response) {
                var state = response.getState();
                if (component.isValid() && state === "SUCCESS") {
                    component.set('v.issearching', true);
                    setTimeout(function () {
                        component.set('v.issearching', false);
                    }, 2000);
                    searchResult = response.getReturnValue();
                    for (var i = 0; i < searchResult[0].length; i++){
                        objectlist.push(searchResult[0][i]);
                    }
                    component.set('v.errorMessage', '');
                    component.set('v.isTrue', true);
                    component.set('v.searchResult', objectlist);
                    if (objectlist.length == 0) {
                        component.set('v.errorMessage', 'No records found');
                    } else {
                        console.log('results: ', searchResult);
                    }
    
                }
            });
            $A.enqueueAction(retrieveOptions);
        }
        else{
            component.set('v.searchResult', []);
            component.set('v.errorMessage', 'Please enter at lease 3 characters');

        }
        

    },

Server Controller:
@AuraEnabled
    public static List<List<SObject>> getAllKnowledgeArticles(String searchTerm){
        List<List<SObject>> searchList = [FIND :searchTerm IN ALL FIELDS RETURNING Knowledge__kav (Title, Id, ArticleNumber, Summary, LastPublishedDate where PublishStatus='Online' and language='en_US')];
        return searchList;
    }

 
mahesh varma19mahesh varma19
Hi ,

You can write code like this
 <lightning:input label="Search for offer" type="search" variant="label-hidden" placeholder="Search for offer.." onchange="{! c.handleSearchOffer }" />

Please wrtie code  for onchange in controller
Bryant Daniels 46Bryant Daniels 46
Thanks for the input we actually solved for this 2 years ago, but I really appreciate the assistance, in fact we are using LWC now so this component is actually gone.