Since loading large numbers of records proved impossible, I’ve updated my jQuery autocomplete integration to perform an Ajax call and retrieve associated records on key press.
Benefits:
(1) Live Ajax autocomplete on any object
(2) Easy to use
(3) Easily themable with jQuery Themeroller
(4) Easily customizable (implementation is open source)
(5) Can provide a filter
Usage:
<c:enhancedLookup pageController="{!this}" fieldName="Test_Lookup_Object__c" objectToLookup="TestLookupObject__c" bigset="true" />
Defaults are:
(1) 2 characters must be typed in before the call
(2) Call with ‘LIKE’ as specified in Abhinav Gupta’s helpful post on the subject
(3) Lookup on 8 elements while the string is under 3 characters and 100 after this
To provide a filter pass a filter string in SOQL format such as the following:
<c:enhancedLookup pageController="{!this}" fieldName="Test_Lookup_Object__c" objectToLookup="TestLookupObject__c" bigset="true" filterString="WHERE type__c != 'Bear'" />
I’ve added this and numerous other enhancements to the jQuery for Salesforce library at Google Code.
I’ve also added the controller to my library on Snipplr for reference.
6 comments
Comments feed for this article
August 17, 2010 at 2:15 am
Abhinav
Great work @Joel. One thing, can we move the javascript markup from Apex to visualforce page ?
August 17, 2010 at 2:29 am
d3developer
I have what I think is a good reason for not doing it that way. Because I often have 20 + jQuery powered components on a page which I want to load after the DOM is ready, I store all of the initialization code and package it into a single call at the end of the page. I think it helps with legibility.
August 17, 2010 at 5:30 pm
d3developer
btw, here is the code for the test page (which provides the code in the page and extends your example).
http://snipplr.com/view.php?id=39200
There is also a live demo here:
http://formation-developer-edition.na3.force.com/form/largeLookupTest
September 9, 2010 at 5:12 pm
Bill Doran
Hi Joel,
This is a great toolset the autocomplete is really nice to use.
I’m attempting to setup the enhancement components in my org but I’ve run into a slight problem. When using jQuery validation the form data fails to pass to the enhanced controllers. If I call the save method directly via a commandbutton the data is available but if I use the javascript/actionFunction combination the problem appears.
The code I’m using is:
jQuery.noConflict();
jQuery(function($){
$(document).ready(function() {
$(‘.myForm’).validate({
submitHandler: function(form) {
superSave();
}
});
});
});
with
Is there any reason why the save would break when using the actionFunction? Any pointers you can give me would be greatly appreciated.
Thanks very much,
Bill
September 9, 2010 at 9:46 pm
d3developer
Unfortunately there is not a lot of documentation for many Visualforce elements so all I can say is that they don’t always work as expected. I tried replacing the commandButton with a commandLink myself and noticed more or less the same problem as you are having.
For it to work things need to happen in the following order:
(1) Trigger save in all standard elements (mostly apex:inputText)
(2) Trigger submit on form
(3) Validate plugin interrupts
(4) Submithandler processed
(5) ActionFunction inside SubmitHandler runs and actually saves values
If you can figure out what is actually happening please let me know but my guess is that the order of (1) and (2) are reversed with both the commandLink and actionFunction (I’m assuming of course that your actionFunction is inside your form).
September 10, 2010 at 9:50 am
Bill Doran
Hi Joel,
Thanks for your reply it was very helpful. I was able to find an initial work around of removing the submithandler and just commiting from the commandbutton. I checked the code and the actionFunction was placed in a separate form, this code was based on your example code. I moved the actionFunction into the main form and the save is now working correctly. The acitionFunction must have been out of scope in the other form.
It’s odd because the same design seems to work fine in your example code (taken from your google repository). At any rate, this has resolved my issue.
Thanks again,
Bill