Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
kannapapikannapapi 

Jquery not working with apex:inputField

hi
i want autocomplete functionality on lookup field.
So i wrote jquery for autocomplete.
when i tried to use in apex:inputField it is not working.
 In apex:inputText it is working.But the problem is it is displaying id of the record and not the name.
When using in apex:inputField the lookup is showing like this..
[User-added image]
Code Snipprt:
<script type="text/javascript">  
        var jq = jQuery.noConflict();   
        var apexACList =[];               
        <apex:repeat value="{!listAC}" var="ACList">          
            apexACList.push('{!ACList.WS_User__r.name}');         
        </apex:repeat> 
        jq(document).ready(function(){ 
            jq(".acautocomplete").autocomplete({
                source : apexACList 
            }); 
            
        }); 
<apex:inputField value="{!relList.Person__c}" styleClass="acautocomplete"   />
Can anybody help me on this..
Michael VerhovskiMichael Verhovski
Check JavaScript console for errors
Sameer PrasonnSameer Prasonn
Hi,

I believe you need to go for static method for the same. here i have a code snippit for you as an example.
Step 1 : Create a remote method 
  
@RemoteAction
	 public static list<sObject> [Method-name](string s){
        list<sObject> accList = new list<sObject>();
        if(s != ''){
            String query = 'select Id, Name from sObjectwhere Name like \'%' + s + '%\'';
            accList = database.query(query);
        }    
        return accList;
    }
Step 2 :  Invoke the remote method from JavaScript on Visual Force Page. eg.  

function getMyData(response,param){
            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.[class-name].[Method-Name]}',
                param, 
                function(result, event){
                    if (event.status) {                        
                        var objList = [];
                        for(var i = 0; i < result.length; i++){
                            var obj = new Object();
                            obj.label = result[i].Name;
                            obj.value = result[i].Name;
                            obj.id = result[i].Id;
                            objList.push(obj);
                        }
                        response(objList);
                    }else {
                        alert(event.message);
                    }
                }, 
                {escape: true}
            );
        }
Step 3: Consume the result from apex:input control eg.
  
$('input[id$=input-id]').autocomplete({
                source: function(request, response){
                    getMyData(response ,request.term);         
            },
            select: function(event, ui){
                    $('input[id$=Name]').val(ui.item.value);
                    $('input[id$=Id]').val(ui.item.id);     
                     $('div[id$=txtSearchPanel]').attr('Style','display:none');              
                    return false;
                }            
	 	});

Hope this code snippit helps you. if this code snippit fulfill all your need. Please mark it as a best answer so people can use it for similier problem.

Thanks and regards,