Autocomplete Visualforce Component V2! Yes Its the V2!


Well this one of the most required iteration of my Visualforce Autocomplete Component, which worked well with small data set but starts showing sluggishness with large number of records. After doing some debugging and I felt like the underlying architecture is the problem and needs to be rewritten. And finally while searching for a good JQuery component I came across the Select2 project which looked promising but was a lil but different and was more to do with Picklists. Hmm well gradually I started going deeper into the API and guess what ? I found a way to make it to a Autocomplete component!.

The newer component looked pretty much good and was way faster than the earlier Jquery Autocomplete that I used in V1.

AutocompleteV2 in Action


Summing up few features of the V2

  • The component now uses Select2 instead of Jquery Autocomplete
  • Much more faster than earlier version and can handle large dataset
  • Complete new UI
  • The component no more depends on the Jquery from the package and can use jquery from Visualforce page(if already referred in page).
  •  Configurable : The search field can be configured to search fields other than "Name" field. Even the value that is returned to controller can be configured return fields other than record Id.
How to Use ?

<c:AutoCompleteV2 allowClear="true" importJquery="true" labelField="Name" SObject="Account" valueField="Id" targetField="{!targetField}" style="width:200px"/>  

Description
  • labelField : The field which is displayed in the component  and against which matching is done with the entered text. In above code snippet Name is displayed in the autocomplete component.
  • valueField : The field value which is passed back to targetfield when a record is selected.
  • targetField : The field from controller where the selected values is set.
  • SObject : The sobject Api Name against which matching/query is done.
  • importJquery : Assign false if you dont want to jquery files from package.
  • syncManualEntry : Allow manual entry of data from autocomplete component. So if a matching value is not found for the entered query string, on page submit the same value will be sibmitted to targefield
  • allowClear : Set true to give user a option to clear existing value. If this value is set true user will see a small cross Icon to clear the existing value from the field
In addition to this a Visualforce Page "AutocompleteV2Demo" is included in package. This page searches through different accounts that are available in the Org. Have a look at the same for syntax and implementation



Screens

   


Where can this be used ?
  • It can be used for replacing Lookups and Master Detail fields. Instead of pressing the lookup button user can directly type in the autocomplete field to search and link the right record.
  • It can not only refer Lookups and Master Details but also can search through any object. It can be used as replacement for picklist. Create a object to store the Values available in picklist and use the V2 component to refer the same.(Recommended only when you have large number picklist values to show)
  • Can be used in quick search pages to search for records and swiftly navigate to the record once user submits

78 comments:

  1. A great update - thanks so much for this version and the previous. I've just incorporated into my VF page, but it looks like it doesn't work (the component renders as a normal standard inputText) if sidebar="true". Why does sidebar have to be turned off? Anyways, thanks again!

    ReplyDelete
    Replies
    1. it should work. Do you have any sidebar component that uses jQuery ?

      Delete
    2. I'm getting similar results with the sidebar on, were you able to resolve your issue Peter? If so, how? Thanks.

      Delete
    3. Hi Dave, do you have anything in your side bar that uses Jquery ? I tried this on my org works perfectly with the sidebar.

      Delete
  2. I tried this AutoComplete V2 component and it works great if I choose an existing value. But if I enter a text that doesn't exist already in the object field, the component immediately clears the input field, the moment I move to the next field. The documentation says if "syncManualEntry' is set to true, it should take the manually entered value - but it doesn't. Any idea on how to fix this?

    ReplyDelete
    Replies
    1. This one something that came from the V1. I am checking into this. wIll realease a update soon

      Delete
    2. I did a quick fix try this out https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000MeZm

      Delete
  3. I'd also be interested in the "syncManualEntry" functionality. This would solve quite a few problems for us if it worked.

    ReplyDelete
    Replies
    1. This one something that came from the V1. I am checking into this. wIll realease a update soon

      Delete
    2. I did a quick fix try this out https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000MeZm

      Delete
  4. Hi, Any work going on related to this package? Get installation failure message! An other one worked perfectly!

    ReplyDelete
    Replies
    1. Well do you have any older version installed in your org ? If yes I guess you have to uninstall that version and then try installing the newer version. By the way I just tried installing it in my dev org, no failures and was able to instal it.

      Delete
  5. Sorry. Org limitation. Installed in other org and all seems fine. Thanks for all the effort to post this here! Great!

    ReplyDelete
  6. Hi,

    I'm struggling to merge two of your solution. I would like to achieve that based on a user autocomplete lookup, I get the related object records back based on the user id.

    The controller seems the problem;
    public class AutocompleteV2Demo_con {

    public String targetField { get; set; }


    public List getObjects(){
    return [SELECT Name,Category__c,Type__c,Subject__c,Due_Date_Progress__c FROM object__c];
    }

    public List getFields(){
    return new List{'Name','Category__c','Type__c','Subject__c','Due_Date_Progress__c'};
    }
    static testMethod void runTest(){
    EnhancedPageBlockTablepdo con = new EnhancedPageBlockTablepdo();
    con.getObjects();
    con.getFields();
    }
    }

    The VF page looks fine, but I cannot use the autocoplete anymore, nothing works. When I enter a name nothing happens.. (Looks read only)

    Hope you can help!

    ReplyDelete
    Replies
    1. ohh well never thought of this ! can you share a glimpse of your VF Page as well ?

      Delete
    2. This comment has been removed by the author.

      Delete
    3. I have send it directly, This box doesn't allow me to upload or so!!

      Delete
    4. Paul I am really sorry for the delay. Seems like there is a conflict between the two and I guess I have to rewrite the PageblockTableEnchancer to make them work together. Currently I am not getting enough time to update the code but will do soon. If you still need some help please drop me a message

      Delete
    5. Thanks,

      Yes some help would be nice! Probably helpfull for others also!

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Hi and thanks for a great component! I am working on getting it on a visualforce page of mine and it looks very nice there. One question though. Can you pass a parameter into the search? I am using it to look up contacts and in some cases I would like to limit the search to contacts of a certain account.

    Thanks again.

    ReplyDelete
    Replies
    1. well sadly this is something that needs a code change and I am considering this for my next release. I will be updating the same soon.

      Delete
  9. I am getting the following error when using my own custom object with this control, code and error below. is the labelField and valueField the API names or the "Field Label" names?




    Invalid Field/Object API Name: line 97, column 1: sObject type ‘MyObject__c’ is not supported. If you are attempting to use a custom object, be sure to append the ‘__c’ after the entity name. Please reference your WSDL or the describe call for the appropriate names.

    ReplyDelete
    Replies
    1. Well scot the labelField is the field API of the field that you want to show as label (options / dropdown values) in the autocomplete and valueField is the API name of the field you want to capture in targetField.

      Delete
  10. Also, I have found when using the auto complete component with the blocking UI component the auto complete won't release the UI, it stays blocked. I have to comment out the block below on my page when using the auto complete component. The reason why the importJQuery is false, I am also using the PageBlockTableEnhancerADV component of the page.

    c:VFBlockUI importJQuery="false" ....

    ReplyDelete
    Replies
    1. can you give a glimpse of the code ?

      Delete
    2. Aninava, I sent you an email with the code example. All I did was change the autocomplete demo and placed the UI Block Component at the top of the VF page. Did you get the email and do you have a solution or work around for the problem?

      Delete
    3. Can you forward me the code again ? I probably missed it

      Delete
    4. Just sent it to your gmail account

      Delete
    5. Just checking did you get the email with the VF code?

      Delete
    6. Yeah I got your mail, currently a bit busy I will check once I get some time

      Delete
    7. I understand, thanks for looking into the issue.

      Delete
  11. Sent you an email using a modified version of the autocomplete demo

    ReplyDelete
  12. I 'm using your very nice autocomplete v2 - really a nice component.
    But I have a problem when this is in a VF page and in a section that is refreshed (rerender). The component isn't working and you only see a text box.

    Is there something that I need to do so that the components keeps on working?

    Many thanks for the help.

    ReplyDelete
    Replies
    1. Hi Bart, I am really glad that you liked it. By the way did you check the demo page ? The demo page also has a "Submit" button that rerenders the section in which the component resides. Did you implement the component in the same way ?

      Delete
  13. I am wondering if JQuery NoConflict would help collision with other sidebar components. Sidebars jQuery hacks are going away...but I have one running in the meantime and Autocomplete won't work with it enabled. Any headway on this?

    ReplyDelete
  14. I am using AutoComplete V2 component with some modifications. I added 2 more parameters to it. First is 'extraSOQLCondition' which is used to pass a string of SOQL condition which is used to filter the record. For example, I wanted to search only accounts of certain recordtype.
    Second is 'OnChange', which is basically an onchange event that can be used by container of the component.

    It is working really great. Though I am facing a problem. The component breaks down when there is a single quote (') in the data labels. For example the account name is: Bellevue Women's Clinic
    If I select this account, the component shows blank value on the page.

    Can you help me find out where should this issue be fixed?

    ReplyDelete
    Replies
    1. Never mind.... I figured it out and fixed... thanks...

      Delete
    2. Hi Varun,
      Even im trying for similar code
      Can you please send the code you have used. im new to VF (prakashchowdary64@gmail.com)
      Thanks!

      Delete
    3. Ok guys looks like this package needs an update, I will try to push an update soon

      Delete
    4. This comment has been removed by the author.

      Delete
  15. Hi Avinava,

    The demo worked great, until I tried to make a trivial edit (add a comment) and re-save. Then I got the following error:

    Type mismatch for <apex:attribute assignTo>. Value binding to a property of type ANY is required, property specified (targetFieldVar) is of type Object.

    I googled and the first thing came up was your post on github:

    https://github.com/joeferraro/MavensMate-SublimeText/issues/284

    Do you recall how you resolved this?

    Many Thanks,
    Kevin

    ReplyDelete
    Replies
    1. I think I just answered my own question. I changed the Type on the targetField attribute from Object to sObject. This seems to work.

      Thanks for this useful component.

      Kevin

      Delete
    2. I'm getting this same error as well, and I've tried to mimic the same setup as used in the demo, but still no luck. Any ideas?

      Delete
  16. Avinava,
    I saw that Varun Rathi said he modified your code with an "onchange" event with your tool. I would like to use an onchange event too. When a user selects a value it triggers the "onchange" event which allows an action method to execute in lieu of using the "Submit" button like you have in your example. I am unsure how to accomplish this using a component.
    Thanks

    ReplyDelete
    Replies
    1. Did you get fix for onchange event? if so,could you please share the details?

      Delete
  17. Hi there!
    Got error while installing component:

    --------------------------------------------------------------------------------------------------------------------------

    Visualforce Autcomplete V2

    Package install error
    There are problems that prevent this package from being installed.

    Problems

    Duplicate Name The name "AllDemoLink" is already used on component type: Visualforce Component. Please rename existing component.

    ReplyDelete
    Replies
    1. I already using your 'PageBlockTableEnhancerADV" ...

      :)

      Delete
    2. Ok ... to prevent this error I renamed 'Alldemolink' component in prev. utility and installed Autocomplete successfully.

      Delete
  18. I came through the requirement where lablefield and valuefield should be same.
    however, with your component labelfield and valuefield cannot be same.
    hope you would update that part too.
    *blessings

    ReplyDelete
  19. Hi,

    I am facing some issue when using this component on SF1 ipad ...

    Step 1: Create to 2 VF page i.e VF1 and VF2
    Step 2 Create custom controller to VF1 Page
    Step 3 : add the component on VF2
    Step 4 : Now from VF1 navigation to vf2 with help pagereference.. this works fine when window.location and navigate from vfpag1 to vfpage2
    it fails when use pagerefernce and navigation to vfpage2 .. not sure why this happening...

    Thanks
    Ashok

    ReplyDelete
  20. Thanks for great components. I am trying to use your autocomplete with visualstrap and when I do it. I get following error:
    Global component 'vs__visualstrapblock' may not use component 'c__autocompletev2'. Component 'c__autocompletev2' has public remoted methods

    Any idea how to get rid of this error message?

    ReplyDelete
    Replies
    1. I think you can try to make the autocomplete_con controller method and class global ?

      Delete
  21. Hi Avinava Maiti,

    Can u please let me know wht is this issue with this, my app is completely broken bcoz of this bug.

    is it bcoz of of java script not loaded ?
    i am not able to debug the issue on the ipad, just check with u wht might be the reason.

    I am facing some issue(i am not able to enter the text in the text box ) when using this component on SF1 ipad ...

    Step 1: Create to 2 VF page i.e VF1 and VF2
    Step 2 Create custom controller to VF1 Page
    Step 3 : add the component on VF2
    Step 4 : Now from VF1 navigation to vf2 with help pagereference.. this works fine when window.location and navigate from vfpag1 to vfpage2
    it fails when use pagerefernce and navigation to vfpage2 .. not sure why this happening...

    Thanks
    Ashok

    ReplyDelete
    Replies
    1. Similar issue happening to my VF Page Redirection.
      Please suggest a way out here.
      hi @ashok
      Did you get any workaround for this?

      Delete
  22. Can we concatenate account phone with existinbg account name in search field?

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. Hi I am using the component and it is gr8 component i can say. Can any on help me to rerender on onchange as soon as secte he accont name rather than one more button .

    ReplyDelete
    Replies
    1. Hello Satish, Its not mandatory that you need to use button demonstrated in example if you have any other button just like "Save" button in your page then you dont need to add button again with that button it will work. Let me know if that helps

      Delete
  27. Hi This is really great. I am using this in force.com sites and component is not returning any results. It works fine when we access internally. So should be permission issue and I tired all ways. Can you pls guide me?

    ReplyDelete
  28. how to specify multiple field names in the 'labelField' parameter of component if i want the search term to be searched among multiple fields?

    ReplyDelete
  29. Does anyone have the code for the "onchange" event? Avinava, could you add this to the main component?

    Also, how do we remove the & ' type characters from the display text?

    Thanks,
    Jon

    ReplyDelete
  30. On rerender autocomplete component turning into textbox with no error found in Inspect, fingers crossed can someone help me here?
    Thanks,
    Phani

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. objectname : quote__c fieldname="from1__c"

    c:AutoCompleteV2 allowClear="true" importJquery="true" labelField="from1__c" SObject="Quote__c" valuefield="Id" targetField="{!inputText1}" style="width:200px"/>


    <apex:outputText value="{!inputText1}" style="width:200px!important"

    I Want to get the same value what i am selecting from auto completion .But i am getting value as " id ".

    If i change the value as "valuefield" as "from1__c" .

    Then it is showing error as duplicate field i cant able to select value .

    ReplyDelete
    Replies
    1. ell sorry for late reply, have been busy with work.
      I tried to make the changes, you can try to deploy the git version of the app from here https://github.com/Avinava/Autocomplete-Visualforce-Component-V2

      (I didnt get the chance to test it well)

      Delete
    2. I am sorry to say this, but the onchange functionality in not working.
      Can you please fix it..
      Thanks,
      Kapil

      Delete
  33. Avinava,
    I have a request, please. I see there is a lot of interest above, including myself back in 2014, that would like to see an "onchange" event occur when the user selects an item from the list instead of requiring a button. I can provide you some code that works in a JQuery function that someone did but am not sure how to incorporate it into yours as I am unfamiliar with JQuery. Thanks
    Thanks

    ReplyDelete
    Replies
    1. Well sorry for late reply, have been busy with work.
      I tried to make the ochange implementation with the component and you can try to deploy the git version of the app from here https://github.com/Avinava/Autocomplete-Visualforce-Component-V2

      (I didnt get the chance to test it well)

      Delete
  34. Thankyou for your reply .This is awesome working very nicely .Any chance do you know how to remove duplicate value from autocompletion array ?I mean if i have value as "ales" in three records and it is showing the same in auto completion as three times in autocompletion .Let me know i am unclear

    ReplyDelete
    Replies
    1. The code are open-sourced on github, you can make changes as per your requirements

      Delete
  35. Thank you so much for sharing this!!! You are awesome!! :D

    ReplyDelete
  36. I am using this and it's working but when i search first option show as searched String not a record , i tried to remove but not found any way to remove it? can anyone help me ?

    ReplyDelete
  37. Hi Arinava,
    Your component is really good and works well on desktop version of visualforce pages. I tried the same on mobile version visualforce page (using jquery mobile) and its not working. I am not able to enter any text in the autocomplete text box through SF1. Do you know how to make this working? Thanks in advance.

    ReplyDelete