Define Apex controller in javascript home componen

问题:

I have created a custom object Code_Postal__c. The goal is to check into my Code_Postal__c record the city's name with the same ZipCode set by the user on an Account record page.

I don't need, and don't want to create a custom visualforce page.

The fun fact is that my field is pre-populate with the good values but the research doesn't work. When I inspected my page to check why my autocomplete doesn't work I got the error below:

**Uncaught ReferenceError: AutoCompleteController is not defined e?retURL=%2F001M000000UyrUl:24
j$.autocomplete.source e?retURL=%2F001M000000UyrUl:24
$.widget._search jquery-ui.js:6563
(anonymous function) jquery-ui.js:413
$.widget.search jquery-ui.js:6555
(anonymous function) jquery-ui.js:413
(anonymous function) jquery-ui.js:6536
handlerProxy**

Here my controller:

global with sharing class AutoCompleteController {
//private final Movie__c mov; 
private Code_Postal__c cpCheck;
private Account accToCheck;

    // Instance fields
    public String searchTerm {get; set;}
    public String selectedMovie {get; set;}

    // Constructor
    public AutoCompleteController() {

    }
    public AutoCompleteController(ApexPages.StandardController stdController) {
    this.accToCheck = (Account)stdController.getRecord();
    //this.mov= (Movie__c)stdController.getRecord();
}

// JS Remoting action called when searching for a cp
@RemoteAction
global static List<Code_Postal__c> searchMovie(String searchTerm) {
    System.debug('Movie Name is: '+searchTerm );
    List<Code_Postal__c> movies = Database.query('Select Commune__c, Code_Postal__c from Code_Postal__c where Code_Postal__c like \'%' + String.escapeSingleQuotes(searchTerm) + '%\'');
    return movies;
}

}

Here my component :

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
<script type="text/javascript">
    /*Create a new variable j$ just to avoid any conflicts with other libraries which may be using $.*/
    var j$ = jQuery.noConflict();
    /*Capture the list of countries in a Array.*/

    /*on Document ready*/
    j$(document).ready(function(){
        var PLACEHOLDER = 'Enter Code_Postal__c Here'; 
        var movieObjects;
        var queryTerm;

        j$('[id$=acc18zip]').autocomplete({
            minLength: 2,
            source: function(request, response) {
                        queryTerm = request.term;

                           AutoCompleteController.searchMovie(request.term, function(result, event){
                            if(event.type == 'exception') {
                                  alert(event.message);
                            } else {
                                 movieObjects = result;
                                 response(movieObjects);
                            }
                        });
                   },
            focus: function( event, ui ) {
                    j$('[id$=acc18zip]').val( ui.item.Code_Postal__c );
                    j$('[id$=acc18city]').val( ui.item.Commune__c );
                    return false;
                    },
            select: function( event, ui ) {
                        j$('[id$=acc18zip]').val( ui.item.Code_Postal__c );
                        return false;
                    },
         })

         .data( "autocomplete" )._renderItem = function( ul, item ) {
            var entry = "<a>" + item.Code_Postal__c + " " +item.Commune__c;

            entry = entry + "</a>";
            entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>");
            return j$( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( entry )
                .appendTo( ul );
        };

        /* Add or remove placeholder values*/
        j$('[id$=acc18zip]').val(PLACEHOLDER);
        j$('[id$=acc18zip]').on("focus",  function(event){
            j$tgt = j$(event.target);
            if(j$tgt.val() === PLACEHOLDER ){
                j$tgt.val('');
                j$tgt.removeClass('placeHolder');
            }
        });
        j$('[id$=acc18zip]').on( "blur",  function(event){
            j$tgt = j$(event.target);
            if(j$tgt.val() === '' ){
                j$tgt.val(PLACEHOLDER);
                j$tgt.addClass('placeHolder');
            }
        });

    });
</script>  

回答1:

As i said , i found a way to make my auto-complete. It's making a request, and parsing my string. It's not working with parameter..='( I'm trying to find a way to do it dynamically and parse my object (with the item?) Anyway this example is working :

The controller :

global class cpSearch2{ 
    webService static String searchCP() {
        String pickValues='';
        for(Code_Postal__c cp : [Select Commune__c, Code_Postal__c from Code_Postal__c ]){
               pickValues = pickValues +cp.Code_Postal__c+ ' - ' + cp.Commune__c+'+';
        }
        return pickValues;
    }
}

My javascript component:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="/soap/ajax/15.0/connection.js" type="text/javascript"></script>
<script src="/soap/ajax/15.0/apex.js" type="text/javascript"></script>
<script>var url = document.URL;
if(url.indexOf('001')!=-1)    
{                
    var sid = document.cookie.match(' sid=([^;]*)')[1];   
    sforce.debug.trace=true;
    sforce.connection.sessionId = sid;
    var stages = sforce.apex.execute("cpSearch2", "searchCP", {});
    var staheArray = stages.toString().split("+");
    $ = jQuery.noConflict();
    $(function() {
        var availableTags = staheArray;
        $( "#acc18zip" ).autocomplete({
            source: availableTags
            });
        $( "#acc18zip" ).on("autocompleteselect", function( event, ui ){
            selectedArray = ui.item.value.split(" - ");
            $("#acc18zip").val(selectedArray[0]);
            $("#acc18city").val(selectedArray[1]);
            return false;  
        });
    });
}
</script>