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

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=""></script>
    <script src="/soap/ajax/26.0/connection.js" type="text/javascript"></script>
    <script src=""></script>
    <link rel="stylesheet" href=""/>
    <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.
         function changeToText(){
           var currSelected = document.getElementsByClassName("keypad");
           for (var i=0; i< currSelected.length;i++) {
                  currSelected[i].type = 'text';
       //on Document ready
                source : apexAccountList

    <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: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 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
    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>();

    Public void addCPLI()
            Customer_Product_Line_Item__c acc = new Customer_Product_Line_Item__c();

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


How can I solve this problem?
Aditya TopalliAditya Topalli
      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.