You need to sign in to do that
Don't have an account?

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