Why JQueryUI does not work on salesforce standard

Question

I am having trouble using JQueryUI with salesforce standard elements. Basically, I want to auto suggest the record names to the user, instead of the user clicking on the salesforce search button.

<apex:inputField value="{!MyRecord.ChildRecord__c}" id="inpId" required="true/>

<script>
   jq$(document.getElementById('{!$Component.inpId}')).autocomplete( { 
            minLength: 2,
            autoFocus: true,
            source: mySource
   });
</script>

Therefore, I want to know if anyone attempted to use JQueryUI with standard salesforce input elements. In my case, the JQueryUI events are not firing for salesforce elements.

Answer 1

I figured out the reason why JQeuryUI was not working on SalesForce standard input element. I was trying to use JQueryUI autocomplete on the input element. The action function that was supposed to be invoked was not called because I did not have

<apex:actionFunction immediate="true" />

That is we must have immediate=true attribute set so that action function is called immediately. If we do not have this attribute set, SalesForce tries to validate all the standard input elements and if the validation fails, action function is never called.

Answer 2

{!$Component.[elementid]} doesn't always work for me; I'm not sure why. I prefer to use the Attribute Ends With Selector (http://api.jquery.com/attribute-ends-with-selector/).

Try something like this:

<apex:includeScript value="/soap/ajax/18.0/connection.js" />
<apex:includeScript value="/soap/ajax/18.0/apex.js" />

<script>
    var j$ = jQuery.noConflict();
    j$(document).ready(function(){init();});

    function init()
    {
        var mySourceText = "ActionScript AppleScript Asp BASIC C "
           + "C++ Clojure COBOL ColdFusion Erlang Fortran Groovy "
           + "Haskell Java JavaScript Lisp Perl PHP Python Ruby "
           + "Scala Scheme";

        var mySource = mySourceText.split(" ");

        j$("[id$='myInput']").autocomplete({ 
            minLength: 2,
            autoFocus: true,
            source: function(request, response){ 
                    response(GetSourceAjaxAPI(request.term)); }
        });
    }

    function GetSourceAjaxAPI(s)
    {
        var result = sforce.apex.execute("TestAutocomplete", 
                     "GetAutocompleteValuesAjaxAPI", {SearchTerm:s});
        return result;
    }
</script>

<apex:form >
    <apex:pageblock >
        <apex:pageblocksection >
            <apex:pageblocksectionitem >
                <apex:inputfield id="myInput" value="{!Contact.FirstName}" />
            </apex:pageblocksectionitem>
        </apex:pageblocksection>
    </apex:pageblock>
</apex:form>

Controller:

global class TestAutocomplete 
{
    global TestAutocomplete(ApexPages.StandardController myStandardController) {}

    webservice static List<String> 
        GetAutocompleteValuesAjaxAPI(String SearchTerm)
    {            
        String mySourceText = 'ActionScript AppleScript Asp BASIC C '
           + 'C++ Clojure COBOL ColdFusion Erlang Fortran Groovy '
           + 'Haskell Java JavaScript Lisp Perl PHP Python Ruby '
           + 'Scala Scheme';

        List<String> mySourceList = mySourceText.split(' ');
        List<String> myReturnList = new List<String>();

        for(String s : mySourceList)
        {
            if(s.contains(SearchTerm)){ myReturnList.add(s); }
        }

        return myReturnList;
    }
}

Hope that helps,
Matt