Hi,

I have spent the better part of a day trying to get a new Auto Complete feature working using jQuery based on a post I read (http://anupjadhav.com/2013/02/01/jquery-autocomplete/)

The problem is that jQuery cannot find my controller, I get this error in the web console: ReferenceError: AutoCompleteController is not defined

Here is my VF page source

<apex:page Controller="AutoCompleteController" >

    <apex:pageMessages />

	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
	<apex:styleSheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.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:pageBlock id="searchBlock" >
	        <apex:pageBlockSection id="searchSection" title="Find Attendee" columns="1" >
	             <apex:outputLabel value="Attendee Name" for="attendeeBox" />
	             <apex:outputPanel >
	                 <apex:inputText id="attendeeTextBox" value="{!searchTerm}" styleClass="placeHolder"/>
	                 <apex:inputHidden id="searchAttendeeId" value="{!selectedAttendee}" />
	             </apex:outputPanel>
	        </apex:pageBlockSection>
	    </apex:pageBlock>
	    
	    <apex:commandButton value="Exit" action="{!exit}" />
	    
	</apex:form>


	<script type="text/javascript">
	    var PLACEHOLDER = 'Enter Attendee Name Here'; 
	    var attendeeObjects;
	    var queryTerm;
	    
	    $('[id$=attendeeTextBox]').autocomplete({
	        minLength: 2,
	        source: function(request, response) {
	                    queryTerm = request.term;
	                    alert('BEFORE call to SearchAttendee');
	                    AutoCompleteController.searchAttendee(request.term, function(result, event){
	                    	alert('AFTER call to SearchAttendee');
	                        if(event.type == 'exception') {
	                        	alert(event.message);
	                        } else {
	                    		alert('NO exception');
	                            attendeeObjects = result;
	                            response(attendeeObjects);
	                        }
	                    });
	               },
	        focus: function( event, ui ) {
	                $('[id$=attendeeTextBox]').val( ui.item.Name );
	                return false;
	                },
	        select: function( event, ui ) {
	                    $('[id$=attendeeTextBox]').val( ui.item.Name );
	                    $('[id$=searchAttendeeId]').val( ui.item.Id );
	                    return false;
	                },
	     })
	     .data( "autocomplete" )._renderItem = function( ul, item ) {
	        var entry = "<a>" + item.Name;
	       
	        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$=attendeeTextBox]').val(PLACEHOLDER);
	    $('[id$=attendeeTextBox]').on("focus",  function(event){
	        $tgt = $(event.target);
	        if($tgt.val() === PLACEHOLDER ){
	            $tgt.val('');
	            $tgt.removeClass('placeHolder');
	        }
	    });
	    $('[id$=attendeeTextBox]').on( "blur",  function(event){
	        $tgt = $(event.target);
	        if($tgt.val() === '' ){
	            $tgt.val(PLACEHOLDER);
	            $tgt.addClass('placeHolder');
	        }
	    });
	</script>
</apex:page>

And here is my controller
 

public with sharing class AutoCompleteController {
    
    // Instance fields
    public String searchTerm {get; set;}
    public String selectedAttendee {get; set;}
    

   public AutoCompleteController()
    {
    }
     

    @RemoteAction
    public static List<Person__c> searchAttendee(String searchTerm) {


		list <Person__c> matchedPeople = [select Id, Name from Attendee__c where name like \'%' + String.escapeSingleQuotes(searchTerm) + '%\'');
        
        return matchedPeople;

    }

Any help gratefully accepted.