AutoCompleteAccount.vfc

<apex:component controller="AutoCompleteComponentController">
 
    <apex:stylesheet value="{!URLFOR($Resource.AutoComplete,'/jquery-ui.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.AutoComplete,'/jquery-1.12.4.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.AutoComplete,'/jquery-ui.js')}"/>
    
    <apex:pageBlockSection collapsible="false" title="Search Account" >
                <input  id="accountSearch" value="{!searchTerm}" />    
    </apex:pageBlockSection>    
    
    <script>
        $(function(){  
            $("#accountSearch").autocomplete({  
               minLength: 2,  
               source: function(request, response){  
                    var searchString = request.term;  
                   Visualforce.remoting.Manager.invokeAction("{!$RemoteAction.AutoCompleteComponentController.getSearchSuggestions}",searchString,function(result,event){

                         if(event.status){  
                              if(typeof result === 'undefined' || result.length <=0){  
                                   response(['No Record Found']);  
                              }else {  
                                   response(result);  
                              }  
                         }else {  
                              response([]);  
                         }  
                    },  
                    {escape: true}  
                    );  
               },  
               select: function(event, ui){  
                    if(ui.item.label != 'No Record Found'){  
                        $("#accountSearch").val(ui.item.label);
                        showAccountDetail(ui.item.value); 
                    }  
                    return false;  
               },  
               focus: function( event, ui ) {  
                    $("#accountSearch").val(ui.item.label);  
                    return false;  
               }  
           });  
  });  
  </script>

</apex:component>