[Live Demo]
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
Description
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
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.
<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.
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
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?
ReplyDeleteSorry, meant to write, "OR allow the user to input a completely new value."
DeleteMatt 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@Matt on SFDC necessary changes has been made and issue is marked fixed.Also the unmanaged package link has been updated!
DeleteThe 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.
ReplyDeleteHi, 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.
ReplyDeleteTo 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.
Hi, the component has been updated and you can download the new version from here https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000MIpo
Deletehi..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..
ReplyDeleteThis 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.
ReplyDeleteWell I am unable to understand the requirement. Do you want to use the same in edit page or something ?
DeleteThanks 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"
ReplyDeleteI can write piece of code to enter the value, not sure where to write. Can you please help?
Can you post the code that you were using ?
Deletevery nice blog
ReplyDeleteC.R. Bearing & Bushes Perfect Sales Agra
Thanks. Great tool.
ReplyDeleteHowever, 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
It doesn't add the code...
DeleteMeans to add in the component input text: onchange="getData();"
take a look at this autocomplete, it's awesome, http://justwebcode.blogspot.com/2017/07/autocomplete-textbox-with-jquery.html
ReplyDelete