// AutoCompleteController.cls
public with sharing class AutoCompleteController {
    
    // Instance fields
    public String searchTerm {get; set;}
    public String selectedSchool {get; set;}
    
    // JS Remoting action called when searching for a school name
    @RemoteAction
    public static List<Account> searchSchool(String searchTerm) {
        System.debug('School Name is: '+searchTerm );
        List<Account> schools = Database.query('SELECT Name, BillingCity, BillingState FROM Account WHERE Name LIKE \'%' + String.escapeSingleQuotes(searchTerm) + '%\'');
        return schools;
    }
    
}

<apex:page controller="AutoCompleteController" >
    <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="Locate my high school" columns="1" >
                 <apex:outputLabel value="School Name" for="schoolBox" />
                 <apex:outputPanel >
                     <apex:inputText id="schoolTextBox" value="{!searchTerm}" styleClass="placeHolder"/>
                     <apex:inputHidden id="searchSchoolId" value="{!selectedSchool}" />
                 </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
        
    </apex:form>
    
    <script type="text/javascript">
        var PLACEHOLDER = 'Enter School Name Here'; 
        var schoolObjects;
        var queryTerm;
        
        $('[id$=schoolTextBox]').autocomplete({
            minLength: 2,
            source: function(request, response) {
                        queryTerm = request.term;
                        AutoCompleteController.searchSchool(request.term, function(result, event){
                            if(event.type == 'exception') {
                                  alert(event.message);
                            } else {
                                 schoolObjects = result;
                                 response(schoolObjects);
                            }
                        });
                   },
            focus: function( event, ui ) {
                    $('[id$=schoolTextBox]').val( ui.item.Name );
                    return false;
                    },
            select: function( event, ui ) {
                        $('[id$=schoolTextBox]').val( ui.item.Name );
                        $('[id$=searchSchoolId]').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$=schoolTextBox]').val(PLACEHOLDER);
        $('[id$=schoolTextBox]').on("focus",  function(event){
            $tgt = $(event.target);
            if($tgt.val() === PLACEHOLDER ){
                $tgt.val('');
                $tgt.removeClass('placeHolder');
            }
        });
        $('[id$=schoolTextBox]').on( "blur",  function(event){
            $tgt = $(event.target);
            if($tgt.val() === '' ){
                $tgt.val(PLACEHOLDER);
                $tgt.addClass('placeHolder');
            }
        });
    </script>

</apex:page>