Friday 1 September 2017

Autocomplete In Salesforce Using Visualforce+JQuery


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. {
  3. public static List<String> leadNameList{get;set;}
  4. public String lName{get;set;}
  5. public String successMessage{get;set;}
  6. @RemoteAction
  7. global static String[] populateLeadByName(String value)
  8. {
  9. try
  10. {
  11. leadNameList=new List<String>();
  12. if(String.isNotBlank(value))
  13. {
  14. value= '%'+value+'%';
  15. List<Lead> lstLead=[Select Id,name from Lead where name LIKE:value];
  16. for(Lead l:lstLead)
  17. {
  18. leadNameList.add(l.name);
  19. }
  20. }
  21. return leadNameList;
  22. }
  23. catch(Exception e)
  24. {
  25. System.debug('Message:='+e.getMessage()+'**Line Number='+e.getLineNumber());
  26. }
  27. return null;
  28. }
  29. public void updateLead()
  30. {
  31. try
  32. {
  33. lName=ApexPages.currentPage().getParameters().get('leadName');
  34. if(String.isNotBlank(lName))
  35. {
  36. Lead lead=[select id,name,Update_By__c from Lead where Name=:lName];
  37. lead.Update_By__c='Autocomplete';
  38. update lead;
  39. successMessage='Lead Update Successfully';
  40. }
  41. }
  42. catch(Exception e)
  43. {
  44. System.debug('Message:='+e.getMessage()+'**Line Number='+e.getLineNumber());
  45. }
  46. }
  47. }


Visualforce Page:
  1. <apex:page controller="AutoCompleteCtr" sidebar="false">
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  6. <title>jQuery UI Autocomplete - Default functionality</title>
  7. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
  8. <link rel="stylesheet" href="/resources/demos/style.css"/>
  9. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  10. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  11. <script>
  12. $( function() {
  13. $( "#tags" ).autocomplete({
  14. source: function(request, response) {
  15. Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.AutoCompleteCtr.populateLeadByName}',
  16. request.term,
  17. function(result, event){
  18. if (event.status)
  19. {
  20. console.log(result);
  21. response(result);
  22. }
  23. else
  24. {
  25. alert(event.message);
  26. }
  27. });
  28. },
  29. select:function( event, ui ){
  30. // Call class method by passing this value using action function
  31. callControllermethod(ui.item.label);
  32. }
  33. });
  34. } );
  35. </script>
  36. </head>
  37. <body>
  38. <apex:form >
  39. <apex:actionRegion >
  40. <apex:actionFunction name="callControllermethod" action="{!updateLead}" reRender="mssge">
  41. <apex:param name="leadName" value=""/>
  42. </apex:actionFunction>
  43. </apex:actionRegion>
  44. <div class="ui-widget">
  45. <label for="tags">Search Lead: </label>
  46. <input id="tags"/>
  47. </div>
  48. <apex:outputPanel id="mssge">
  49. <div style="margin: 5px;color: green;">{!successMessage}</div>
  50. </apex:outputPanel>
  51. </apex:form>
  52. </body>
  53. </html>
  54. </apex:page>
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. I used this code. the autocomplete is not firing for me

    ReplyDelete
  2. 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. 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. This comment has been removed by the author.

    ReplyDelete

If you have any doubts, please let me know.