function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
ckellieckellie 

Auto Complete not working in pageblocktables

The auto complete does not render suggested choices when the inputtext field is in a pageblock, but renders suggestions as intended when it is not in a page block. How can I solve this problem. Below is my visualforce and apex code.
 
Visualforce page:

<apex:page Controller="AddmultipleCPLIController"  docType="html-5.0">
    <!--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();
        var apexAccountList =[];
         
        //use the <!-- <apex:repeat > -->tag to iterate through the list returned from the class and store only the names in the javascript variable.
        <apex:repeat value="{!CustomerProductName}" var="accList">
            //Store the name of the account in the array variable.
            apexAccountList.push('{!accList.name}');
        </apex:repeat>
         function changeToText(){
           var currSelected = document.getElementsByClassName("keypad");
           for (var i=0; i< currSelected.length;i++) {
                  currSelected[i].type = 'text';
   }
}
    
       //on Document ready
        j$(document).ready(function(){
             
            j$("#apexaccountautocomplete").autocomplete({
                source : apexAccountList
            });

        });
    </script>
     
    <apex:form id="form1" >
    <apex:pageBlock id="block1">
        <apex:pageBlockButtons >
            <apex:commandButton value="Add Customer Product Row" action="{!addCPLI}"/>
            <apex:commandButton value="Save Customer Product" action="{!saveCPLI}"/>
        </apex:pageBlockButtons>

    <apex:pageblockTable value="{!listcpli}" var="cpli" id="pbt">
        <apex:column headerValue="Customer Product Name" id="c1">
            <apex:inputText styleClass="keypad" onfocus="changeToText()" id="apexaccountautocomplete" required="true" />
        </apex:column>

    </apex:pageblockTable>
 

    </apex:pageBlock>
</apex:form>
</apex:page>
Apex Class:

public class AddmultipleCPLIController {

    public list<Customer_Product__c> getCustomerProductName() {
        return [select id,name from Customer_Product__c limit 25];
    }

    // Instance fields
    public String searchTerm {get; set;}
    public String selectedMovie {get; set;}
    
    // JS Remoting action called when searching for a movie name
   @RemoteAction
    public static List<Customer_Product__c> searchMovie(String searchTerm) {
        System.debug('Movie Name is: '+searchTerm );
        List<Customer_Product__c> movies = Database.query('Select Id, Name from Customer_Product__c where name like \'%' + String.escapeSingleQuotes(searchTerm) + '%\'');
        return movies;
    }
    Customer_Product_Line_Item__c cpli = new Customer_Product_Line_Item__c();
    public list<Customer_Product_Line_Item__c> listcpli{ get; set; }

    public AddmultipleCPLIController()
        {
            listcpli=new list<Customer_Product_Line_Item__c>();
            listcpli.add(cpli);
        }

    Public void addCPLI()
        {
            Customer_Product_Line_Item__c acc = new Customer_Product_Line_Item__c();
            listcpli.add(acc);
        }

    public PageReference saveCPLI() {
       for(Integer i=0; i<listcpli.size(); i++)
        {
        insert listcpli;
            }
        return null;
    }

}


How can I solve this problem?
Aditya TopalliAditya Topalli
Try
 j$(".keypad").autocomplete({
      source : apexAccountList
 });

It is better to use class names in jQuery, instead of Ids when dealing with salesforce because, the ids that are given in the salesforce components like <apex:inputField> etc are not what are rendered on the HTML Page.. Salesforce appends the Tree structure of the components to the Ids, but class name remains unchanged.