How to Use apex:actionSupport tag in VF page

A component that adds AJAX support to another component, allowing the component to be refreshed asynchronously by the server when a particular event occurs, such as a button click or mouse over.

Tag: <apex:actionSupport>

 

actionSupport will add AJAX support to other components in VF page and it will components to be refreshed asynchronouslyby inoking apex method based on the event type.

reRender: This will helps to refresh the components/section, you can pass multiple Id's with comma separated.
action: action attribute specifies the controllers action method that will be invoked when event occurs.
event: It is DOM event that generates AJAX request 

Attributes:

Attribute Name	Attribute Type	Description	Required?	API Version	Access
action	ApexPages.Action	The action method invoked by the AJAX request to the server. Use merge-field syntax to reference the method. For example, action="{!incrementCounter}" references the incrementCounter() method in the controller. If an action is not specified, the page simply refreshes.		10.0	global
disabled	Boolean	A Boolean value that allows you to disable the component. When set to "true", the action is not invoked when the event is fired.		16.0
disableDefault	Boolean	A Boolean value that specifies whether the default browser processing should be skipped for the associated event. If set to true, this processing is skipped. If not specified, this value defaults to true.		10.0	global
event	String	The DOM event that generates the AJAX request. Possible values include "onblur", "onchange", "onclick", "ondblclick", "onfocus", "onkeydown", "onkeypress", "onkeyup", "onmousedown", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onselect", and so on. These values are case sensitive.		10.0	global
focus	String	The ID of the component that is in focus after the AJAX request completes.		10.0	global
id	String	An identifier that allows the component to be referenced by other components in the page.		10.0	global
immediate	Boolean	A Boolean value that specifies whether the action associated with this component should happen immediately, without processing any validation rules associated with the fields on the page. If set to true, the action happens immediately and validation rules are skipped. If not specified, this value defaults to false.		11.0	global
onbeforedomupdate	String	The JavaScript invoked when the onbeforedomupdate event occurs--that is, when the AJAX request has been processed, but before the browser's DOM is updated.		11.0	global
oncomplete	String	The JavaScript invoked when the result of an AJAX update request completes on the client.		10.0	global
onsubmit	String	The JavaScript invoked before an AJAX update request has been sent to the server.		10.0	global
rendered	Boolean	A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true.		10.0	global
reRender	Object	The ID of one or more components that are redrawn when the result of an AJAX update request returns to the client. This value can be a single ID, a comma-separated list of IDs, or a merge field expression for a list or collection of IDs.		10.0	global
status	String	The ID of an associated component that displays the status of an AJAX update request. See the actionStatus component.		10.0	global
timeout	Integer	The amount of time (in milliseconds) before an AJAX update request should time out.		10.0	global

Sample Code to use: Visualforce

<apex:page standardController="Contact" extensions="LookupAutoCompleteKI" lightningStylesheets="true">
    <apex:form id="theForm">

             <apex:inputText value="{!myvalue}">
                          <apex:actionSupport event="onchange" action="{!doNothing}" rerender="theForm"></apex:actionSupport>
            </apex:inputText>
            
     <apex:pageBlock id="theForm" title="{!IF(accList!= NULL && accList.size > 0,'All Accounts','There are no records to display')}">

         <apex:pageblocktable var="acc" value="{!accList}">
             <apex:column value="{!acc.Name}" title="Name"/>
             <apex:column value="{!acc.Amount__c}"/>
             <apex:column value="{!acc.Active__c}"/>
             <apex:column value="{!acc.Phone}"/>
             <apex:column value="{!acc.Website}"/>
         </apex:pageblocktable>
     </apex:pageBlock>   
    </apex:form>
</apex:page>

Apex Class:

public class LookupAutoCompleteKI{

    public final Contact conRec;
    public string myvalue {get; set;}
    public list<Account> accList{get;set;}

    public LookupAutoCompleteKI(ApexPages.StandardController controller){
     accList = [SELECT id,name,Amount__c ,Active__c,Phone,Website FROM Account where                                     (Active__c='NO' OR Active__c='Yes')];
    }
    
    public list<Account> accList{get;set;}
    public void doNothing(){
      string tempInput = '%' + myvalue + '%';
      accList = [SELECT id,name,Amount__c ,Active__c,Phone,Website FROM Account 

            WHERE  Name Like :tempInput limit 100];
       
    }
}

Results Page looks like below: