+ Start a Discussion
suresh dupadasuresh dupada 

How to Refer visualforce components with jQuery

I have tried a lot scenarios but i Couldn't find out correct solution
I am specifying my code which is working with html components along with visualforce components
1. Html components are works fine with jquery always
2. But visualforce components are not working

      Please help me to work with visualforce components in jQuery........
************************
<apex:page controller="AutoComplete">
    <!--Make sure you have the Javascript in the same order that I have listed below.-->
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/soap/ajax/26.0/connection.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        var j$ = jQuery.noConflict();
    if (j$){
        alert('Jquery loaded Successfully');
    }
      
        var apexAccountList =[];
          <apex:repeat value="{!accountList}" var="accList">
            //Store the name of the account in the array variable.
               apexAccountList.push('{!accList.name}');
        </apex:repeat>
        j$(document).ready(function(){
             
            j$("#name").autocomplete({
                source : apexAccountList
            });
           
        });
       
    </script>
    Enter Txt<input id="autocomplete"/>
 
    <script>
            var tags = apexAccountList;
            j$( "#autocomplete" ).autocomplete({
              source: function( request, response ) {
                      var matcher = new RegExp( "^" + j$.ui.autocomplete.escapeRegex( request.term ), "i" );
                      response( j$.grep( tags, function( item ){
                          return matcher.test( item );
                      }) );
                  }
            });
     </script>
     <script>
      var tags = apexAccountList;
      j$("[id$=myname]").autocomplete({
              source: function( request, response ) {
                      var matcher = new RegExp( "^" + j$.ui.autocomplete.escapeRegex( request.term ), "i" );
                      response( j$.grep( tags, function( item ){
                          return matcher.test( item );
                      }) );
                  }
            });
      
      </script>

 
     
    <apex:form >
     
        <br/><br/><br/>Account Name<input type="text" id="name"/>
        <br/><br/><br/>
        Enter Your Text <apex:inputText id="myname"/><br/><br/>
        
        
    </apex:form>
     
</apex:page>



*******


I Would appriciate for any kind of replay.................
Tejpal KumawatTejpal Kumawat
Hello suresh dupada,

Class :

public class AutoComplete {
    public string accountList{get;set;}
    public AutoComplete(){

    }
    
    public string accName{get; set;}
    public void findAccount(){
        string acc = '%' + accName + '%';
        for(Account a : [select Name from Account where Name LIKE : acc ]){
            if (accountList == '')
                accountList = a.Name;
            else
                accountList = accountList + ',' + a.Name;
        }
    }  
}

Page :

<apex:page controller="AutoComplete">
    <apex:pageMessages id="pgmsgId"/>
    <!--Make sure you have the Javascript in the same order that I have listed below.-->
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/soap/ajax/26.0/connection.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        var j$ = jQuery.noConflict();
        
        j$(document).ready(function() {
            loadAutoComplete();
        });
        
        var accounts;
        var arrayOfStrings;
        function loadAutoComplete(){
            arrayOfStrings = accounts.split(',');
            j$('.autocom').autocomplete({
                source:arrayOfStrings
            });
        }
    </script>
    
    <apex:outputPanel id="accOp">
        <script>
            accounts = '{!accountList}';
        </script>
    </apex:outputPanel>
 
     
    <apex:form >
         <apex:actionFunction name="findAccountNames" action="{!findAccount}" rerender="accOp, pgmsgId" onComplete="loadAutoComplete();"/>
         <apex:outputLabel value="Account Name"/>
         <apex:inputText id="acc" styleclass="autocom" onkeyup="findAccountNames();return false;" value="{!accName}"/>
    </apex:form>
     
</apex:page>

If this answers your question then hit Like and mark it as solution!