Auto-complete Visualforce Component

[Live Demo]



Please Note : A Newer Version of this Package is available here http://blogforce9.blogspot.in/2013/10/auto-complete-visualforce-component-v2.html


Well working with visualforce pages, I was always tempted to replace the boring lookup field with a autocomplete component which searches the records as we enter text in them. 

So I sat done and wrote a component for my visualforce pages to replace the boring lookup fields dialogs with autocomplete component.


Few features of the autocomplete component
  • Uses Jquery UI to create the autocomplete component.
  • Look And Feel - Has exactly same look and feel as native components
  • Uses Js Remoting to populate data and hence the component is very fast and light weight.
  • 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 the component in you Visualforce page?


<c:Autocomplete labelField="Name" valueField="Id" SObject="Contact" targetField="{!targetFieldCon}" /> 

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.
For demo purpose you can check the "autocomplete" vf page that is included in package. This page demonstrates the use of the autocomplete component for different sObjects.

Screen : 




Please Note : A Newer Version of this Package is available here http://blogforce9.blogspot.in/2013/10/auto-complete-visualforce-component-v2.html
Package Link :http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000007rf2z

15 comments:

  1. This seems to be a VERY useful component. However, I have a use case that requires the ability to auto-complete from an existing record OR all the user to input a completely new value. I am not wanting to return a record id, just a name from a predefined list. I already created a new custom object with two identical name fields, to enable the component to display/return simple text, but I have not figured out how to return a value if the name input does not already exist in the database. In other words, the target variable is not loaded unless a selection is made from the auto-complete list. Do you have any suggestions on how to adjust the component to support selection AND free form text input?

    ReplyDelete
    Replies
    1. Sorry, meant to write, "OR allow the user to input a completely new value."

      Delete
    2. Matt this can be achieved.I already moved the project to github. Can you please log a issue here https://github.com/Avinava/Autocomplete-Visualforce-Component/issues

      Delete
    3. @Matt on SFDC necessary changes has been made and issue is marked fixed.Also the unmanaged package link has been updated!

      Delete
  2. The new version looks good to me. It now works whether selecting an existing record or inputting a new text entry, and retains the same excellent responsiveness.

    ReplyDelete
  3. Hi, I'm having trouble using this package. It is showing me an error "Error: cannot be same as the ( targetField )" It seems to be because in the custom component the attribute name and the assigned value have the same variable name. This seems to be an issue only with API 27.0.

    To try it out, copy the contents of the autocomplete VF and save it as a new VF page with v27.0. You should be seeing the error on save.

    ReplyDelete
    Replies
    1. Hi, the component has been updated and you can download the new version from here https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000MIpo

      Delete
  4. hi..i have to customise the search results so that an option 'select a new account' should be added to the drop down list...can anyone please help me how this can be done..

    ReplyDelete
  5. This component is awesome. But I have a problem. Could I also pre-populate the fields use this auto complete component but not just enter new value? Many thanks.

    ReplyDelete
    Replies
    1. Well I am unable to understand the requirement. Do you want to use the same in edit page or something ?

      Delete
  6. Thanks for posting this. It was plug and play. But I would like to create a value "on the fly" if one does not exist. I can do that in my controller when user hits save, but before that it fails with error message "null targetField="{!abc}": javax.el.ELException: java.lang.IllegalArgumentException: id test must be 15 characters"

    I can write piece of code to enter the value, not sure where to write. Can you please help?

    ReplyDelete
    Replies
    1. Can you post the code that you were using ?

      Delete
  7. Thanks. Great tool.

    However, I would like to auto retrieve the relevant record once user select it from the options ( without the need to press button 'Get Value').

    Is it possible to modify the component. e.g.:


    Liron

    ReplyDelete
    Replies
    1. It doesn't add the code...
      Means to add in the component input text: onchange="getData();"

      Delete