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!

Improve this question

1 Answer 1

Reset to default
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)
Improve this answer
2
  • 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, 2019 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, 2019 at 1:22

You must log in to answer this question.

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