0

I have a search input which every character that printed on the keyboard will show the closest result, using actionFunction.

for example :

If I printed "uni" all accounts that they names include the name "uni" will appear for selecting.

every letter I tap in my keyboard is calling the controller and make a SOQL query.

My issue (and its happening often) is when I typing "erp" for example, all the closet result are shown for a sec but then its jump again to the previous result - Like I missed a letter.

In the debug logs I print the text that typed - and I got the full name as I type and then one letter off and then one more letter off and so on.

Why this is happening and what can I do to solve it?

This is my code :

<apex:page controller="ExmpleController">

<script>
    function search(){
     doSearch();
    }

</script>

<apex:form >
    <apex:actionFunction name="doSearch" action="{!searchForAccounts}" reRender="accountTable"/>
        <apex:pageBlock >

            <apex:outputText >Account Name</apex:outputText>
                <apex:inputText value="{!name}" onkeyup="search();"/>
            <apex:pageBlockSection columns="3">

                <apex:pageBlockTable id="accountTable" value="{!accounts}" var="acc">
                    <apex:column value="{!acc.Name}"/>
             </apex:pageBlockTable>

            </apex:pageBlockSection>

        </apex:pageBlock>

</apex:form>

And the Controller :

public class ExmpleController  {
    public list<Account> accounts { get; set; }
    public String name { get; set; }

    public ExmpleController(){
        accounts = new list<Account>();
    }

    public pageReference searchAccounts(){

        string query ='';

        if(name !=''){

            query = 'Select Name  From Account Where Name like \''+name+'%\' LIMIT 5';
            accounts = database.query(query);
        }
        else{

            query = 'Select Name From Account LIMIT 5';
            accounts = database.query(query);
        }

        return null;
    }
}

Thanks!

2

I faced this too a few months back.

And this does not happen all the time. At some point it works well and at some it does not.

My Modification:

I applied a delay of 1 second when calling server side.

setTimeout(function() { function search(){
                         doSearch();
                      }
 },2000)
  • Hey!! Thanks!! It looks like It's working well... Just one more question if I may: On my input field - I made an onkeyup variable to call the search function. <apex:input value="{!accountName}" *onkeyup*="searchForAccount();" /> I thought that this solution will be helpful to reduce the serverside call also - but It's still calling 3 times for input such as "abc", even though I have this timeout delay. Do you have any solution on this also? – Salvation Mar 31 '19 at 9:59
  • The technique generally is called debouncing. There are plenty of samples. Typically they use 300ms delays. Long enough to prevent duplicates, short enough to feel instant. For a lightning example check github.com/Stwissel/lwcaura/tree/master/experiments/experiment5/… – stwissel Apr 1 '19 at 1:22

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.