0

Hello I am using the Search input from the lightning input components.

When I am implementing it this is fine, the problem I am having is how would I clear button Icon that is added to the right side of the input box automatically the contents or have an event fire when you click the "Clear Icon" that is built in the component. I would like to use this as a TypeAhead/lookup Component so as type "GRA" a list of like records will be returned, so "Grass" or "Graffiti". One suggestion was to also include "oninput" along with the "onkeyup" the problem is that if you click anywhere within the div both actions are being called. I don't need the search to happen upon a single key like the "Enter" button, but rather every key stroke. I know i can do this with just a Lightning:input of type text and add a Lightning Icon to help with the clear. Just wondering if anyone had any ideas as it would be great to not use to components to complete 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;
}
1

Since you want to detect every change in the search input box but are not looking for a specific key stroke, you could use onchange in the lightning:input instead of wrapping it in a div with onkeyup. This will trigger your controller function anytime the user enters or removes a character in the box as well as when the user clicks the clear button that's part of the lightning:input search type component.

You would change your component markup from what you posted above to the following. Notice you no longer need the div for keystroke detection purposes. You shouldn't need to make any changes to your client controller, helper, or server controller.

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

I used this solution myself in a situation where I needed to add dynamic filtering to a table.

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.