Hi,

I know how to use apex but I really need help with javascript/Visualforce.

The main idea is to autocomplete two fields on a object (during editing) using a onther custom object on my organization.

After some days of search, i found a way to do it with visualforce/apex/js

The fact is that i don't want to create an other edit page for my object.

I saw this article talking about the  the homepage component.

I'm trying to call my controller who is making the request using the same js previously coded on my visual force page.

Initial page :

<apex:page standardController="Movie__c" extensions="AutoCompleteController" >
       <apex:stylesheet value="{!URLFOR($Resource.AutoCompleteWithModal, '/JQueryUI/css/ui-lightness/jquery-ui-1.8.17.custom.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.AutoCompleteWithModal, '/JQueryUI/js/jquery-1.7.1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.AutoCompleteWithModal, '/JQueryUI/js/jquery-ui-1.8.17.custom.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.AutoCompleteWithModal, '/JQueryModal/css/basic.css')}"/>
 

        <style>
                .displayNone { 
            display:none; 
        }
        .displayBlock {
            display:block;
        }
        .ui-autocomplete-loading { 
            background: white url(/img/loading32.gif) right center no-repeat;
            background-size:15px 15px; 
        }
                .placeHolder {
            font-style: italic;
        }
        </style>
        
        <apex:form id="autoCompleteForm" >
                

                     <apex:inputText id="movieTextBox" value="{!searchTerm}" styleClass="placeHolder"/>
                     <apex:inputHidden id="searchMovieId" value="{!selectedMovie}" />
                     <apex:inputText id="moviePC" value="{!searchTerm}" styleClass="placeHolder"/>
                     <apex:outputText id="id" value="{!Id}" />

                
        </apex:form>
        
        <script type="text/javascript">
        var PLACEHOLDER = 'Enter Movie Name Here'; 
        var movieObjects;
        var queryTerm;
        
        
             $('[id$=moviePC]').autocomplete({
            minLength: 2,
            source: function(request, response) {
                        queryTerm = request.term;
                        AutoCompleteController.searchMovie2(request.term, function(result, event){
                            if(event.type == 'exception') {
                                  alert(event.message);
                            } else {
                                 movieObjects = result;
                                 response(movieObjects);
                            }
                        });
                   },
            focus: function( event, ui ) {
                    $('[id$=movieTextBox]').val( ui.item.Name );
                    $('[id$=moviePC]').val( ui.item.moviePC__c );
                    return false;
                    },
            select: function( event, ui ) {
                        $('[id$=movieTextBox]').val( ui.item.Name );
                        $('[id$=searchMovieId]').val( ui.item.Id );
                        return false;
                    },
         })

        $('[id$=moviePC]').autocomplete({
            minLength: 2,
            source: function(request, response) {
                        queryTerm = request.term;
                        AutoCompleteController.searchMovie2(request.term, function(result, event){
                            if(event.type == 'exception') {
                                  alert(event.message);
                            } else {
                                 movieObjects = result;
                                 response(movieObjects);
                            }
                        });
                   },
            focus: function( event, ui ) {
                    $('[id$=movieTextBox]').val( ui.item.Name );
                    $('[id$=moviePC]').val( ui.item.moviePC__c );
                    return false;
                    },
            select: function( event, ui ) {
                        $('[id$=movieTextBox]').val( ui.item.Name );
                        $('[id$=searchMovieId]').val( ui.item.Id );
                        return false;
                    },
         })
         
         .data( "autocomplete" )._renderItem = function( ul, item ) {
            var entry = "<a>" + item.Name + " " +item.moviePC__c;
           
            entry = entry + "</a>";
            entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>");
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( entry )
                .appendTo( ul );
        };
            
        // Add or remove placeholder values
        $('[id$=movieTextBox]').val(PLACEHOLDER);
        $('[id$=movieTextBox]').on("focus",  function(event){
            $tgt = $(event.target);
            if($tgt.val() === PLACEHOLDER ){
                $tgt.val('');
                $tgt.removeClass('placeHolder');
            }
        });
        $('[id$=movieTextBox]').on( "blur",  function(event){
            $tgt = $(event.target);
            if($tgt.val() === '' ){
                $tgt.val(PLACEHOLDER);
                $tgt.addClass('placeHolder');
            }
        });
    </script>

</apex:page>

 Controller :

/*
* Controller to implement the auto-complete feature on the Visualforce page
*/
global with sharing class AutoCompleteController {
    private final Movie__c mov; 
       
        // Instance fields
        public String searchTerm {get; set;}
        public String selectedMovie {get; set;}
        
        // Constructor
        public AutoCompleteController() {
                
        }
         public AutoCompleteController(ApexPages.StandardController stdController) {
        this.mov= (Movie__c)stdController.getRecord();
    }
        // JS Remoting action called when searching for a movie name
    @RemoteAction
    global static List<Movie__c> searchMovie(String searchTerm) {
        System.debug('Movie Name is: '+searchTerm );
        List<Movie__c> movies = Database.query('Select Id, Name,BillingPostalCode__c from Movie__c where BillingPostalCode__c like \'%' + String.escapeSingleQuotes(searchTerm) + '%\'');
        return movies;
    }
    
    @RemoteAction
    global static List<Movie__c> searchMovie2(String searchTerm2) {
        System.debug('Movie Name is: '+searchTerm2);
        List<Movie__c> movies = Database.query('Select Id, Name,BillingPostalCode__c from Movie__c where BillingPostalCode__c like \'%' + String.escapeSingleQuotes(searchTerm2) + '%\'');
        return movies;
    }
}