Friday, 1 September 2017

Autocomplete In Salesforce Using Visualforce+JQuery

      5 comments  

JQuery AutoComplete In Visualforce

In this article, we will perform Autocomplete Jquery search in visualforce page on Lead object.

most of the developers requirement are create custom search and searching perform when keyup and update data when select search data and show the success message.
same process I did here , follow the process and create own Autocomplete search.

here we will use JavaScript Remoting to populate data in search.

Click For Demo





Now understand by example--

Step-1 :

Create Apex class which has the remote method to populate data and update method to update Lead when you select any Lead when search.
Here I used Lead object but you can any object for the search.

Apex Class:

    

  1. global class AutoCompleteCtr
    2. 

  2. {
    3. 

  3.     public static List<String> leadNameList{get;set;}
    4. 

  4.     public String lName{get;set;}
    5. 

  5.     public String successMessage{get;set;}
    6. 

  6.     @RemoteAction
    7. 

  7.     global static String[] populateLeadByName(String value)
    8. 

  8.     {
    9. 

  9.         try
    10. 

  10.         {
    11. 

  11.             leadNameList=new List<String>();
    12. 

  12.             if(String.isNotBlank(value))
    13. 

  13.             {
    14. 

  14.                 value= '%'+value+'%';
    15. 

  15.                 List<Lead> lstLead=[Select Id,name from Lead where name LIKE:value];
    16. 

  16.                 for(Lead l:lstLead)
    17. 

  17.                 {
    18. 

  18.                     leadNameList.add(l.name);
    19. 

  19.                 }
    20. 

  20.             }
    21. 

  21.             return leadNameList;
    22. 

  22.         }
    23. 

  23.         catch(Exception e)
    24. 

  24.         {
    25. 

  25.             System.debug('Message:='+e.getMessage()+'**Line Number='+e.getLineNumber());
    26. 

  26.         }
    27. 

  27.         return null;
    28. 

  28.     }
    29. 

  29.    
    30. 

  30.     public void updateLead()
    31. 

  31.     {
    32. 

  32.         try
    33. 

  33.         {
    34. 

  34.              lName=ApexPages.currentPage().getParameters().get('leadName');
    35. 

  35.             if(String.isNotBlank(lName))
    36. 

  36.             {
    37. 

  37.                 Lead lead=[select id,name,Update_By__c from Lead where Name=:lName];
    38. 

  38.                 lead.Update_By__c='Autocomplete';
    39. 

  39.                 update lead;
    40. 

  40.                 successMessage='Lead Update Successfully';
    41. 

  41.             }
    42. 

  42.         }
    43. 

  43.         catch(Exception e)
    44. 

  44.         {
    45. 

  45.             System.debug('Message:='+e.getMessage()+'**Line Number='+e.getLineNumber());
    46. 

  46.         }
    47. 

  47.     }
    48. 

  48. }
    49.


Visualforce Page:
pop-uptext
    

  1. <apex:page controller="AutoCompleteCtr" sidebar="false">
    2. 

  2.   <html lang="en">
    3. 

  3.     <head>
    4. 

  4.       <meta charset="utf-8"/>
    5. 

  5.       <meta name="viewport" content="width=device-width, initial-scale=1"/>
    6. 

  6.       <title>jQuery UI Autocomplete - Default functionality</title>
    7. 

  7.       <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    8. 

  8.       <link rel="stylesheet" href="/resources/demos/style.css"/>
    9. 

  9.       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    10. 

  10.       <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    11. 

  11.       <script>
    12. 

  12.       $( function() {
    13. 

  13.        
    14. 

  14.       $( "#tags" ).autocomplete({
    15. 

  15.       source: function(request, response) {
    16. 

  16.               Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.AutoCompleteCtr.populateLeadByName}',
    17. 

  17.             request.term,
    18. 

  18.             function(result, event){
    19. 

  19.                 if (event.status)
    20. 

  20.                 {
    21. 

  21.                     console.log(result);
    22. 

  22.                     response(result);
    23. 

  23.                 }
    24. 

  24.                 else
    25. 

  25.                 {
    26. 

  26.                     alert(event.message);
    27. 

  27.                 }
    28. 

  28.             });
    29. 

  29.       },
    30. 

  30.       select:function( event, ui ){
    31. 

  31.              // Call class method by passing this value using action function            
    32. 

  32.              callControllermethod(ui.item.label);
    33. 

  33.       }
    34. 

  34.              
    35. 

  35.     });
    36. 

  36.   } );
    37. 

  37.   </script>
    38. 

  38. </head>
    39. 

  39. <body>
    40. 

  40.     <apex:form >
    41. 

  41.         <apex:actionRegion >
    42. 

  42.             <apex:actionFunction name="callControllermethod" action="{!updateLead}" reRender="mssge">
    43. 

  43.                 <apex:param name="leadName" value=""/>
    44. 

  44.             </apex:actionFunction>
    45. 

  45.         </apex:actionRegion>
    46. 

  46.        
    47. 

  47.         <div class="ui-widget">
    48. 

  48.           <label for="tags">Search Lead: </label>
    49. 

  49.           <input id="tags"/>
    50. 

  50.         </div>
    51. 

  51.         <apex:outputPanel id="mssge">
    52. 

  52.             <div style="margin: 5px;color: green;">{!successMessage}</div>
    53. 

  53.         </apex:outputPanel>
    54. 

  54.     </apex:form>
    55. 

  55.  </body>
    56. 

  56. </html>
    57. 

  57. </apex:page>
    58.
After use this code then your autocomplete is ready. Search any text and select any populated record then it will call controller method via action function and update record and show success message on page.

After select, it show success message like--





5 comments:

  1. Unknown5 April 2018 at 13:09

    I used this code. the autocomplete is not firing for me

    ReplyDelete
  2. Unknown5 April 2018 at 14:09

    The autocomplete is not firing, nothing happens when i enter the input. The apex controller is also not called


    //Script

    $( function() {


    $("#tags").autocomplete({

    minLength: 2,

    source: function(request, response) {

    Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.Classname.MethodName}',

    request.term,

    function(result, event){

    if (event.status)

    {

    console.log(result);

    response(result);

    }

    else

    {

    alert(event.message);

    }

    });

    },

    select:function( event, ui ){

    // Call class method by passing this value using action function

    //callControllermethod(ui.item.label);

    }


    });

    } );

    ReplyDelete
    Replies
    1. Arun Garg5 April 2018 at 14:23

      did you get result in console? First check the status , check controller ,check method you are calling . if not send me complete code via mail so i will rectify .

      Delete
  3. Unknown5 April 2018 at 14:10

    This comment has been removed by the author.

    ReplyDelete

If you have any doubts, please let me know.