Auto Complete Using Jave Script In Visualforce Page

To Execute below code you need to create new Object with below structure :-

Insert Some Records  :-

Controller Code : -

public with sharing class AutoComplete{

        public String empValue {get;set;}
        
    public AutoComplete(ApexPages.StandardController controller){
    }
    
    public list<Employee__c> getEmployeeList(){
        return [select id, Name from Employee__c];
    }  
}

Visuslforce Page :-

<apex:page standardController="Employee__c" extensions="AutoComplete" docType="HTML-5.0" >
 
         <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
         <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
         <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
         
        <script type="text/javascript"> var j$ = jQuery.noConflict();
          var apexEmployeeList =[];
           <apex:repeat value="{!employeeList}" var="appList">           
              apexEmployeeList.push('{!appList.name}');           
          </apex:repeat>
          //on Document ready
          j$(document).ready(function(){
              j$(".apexemployeeautocomplete").autocomplete({
                  source : apexEmployeeList
           }); 
            j$("#button").click(function(){
              alert('somevalue');
             // var obj = document.getElementById("{!$Component.form.panel.apexemployeeautocomplete}");
              alert(obj);
              });  
       
          });  
        </script>
       
<apex:form >
<apex:pageBlock >
     <b>Employee</b>&nbsp;
       <apex:inputtext label="Employee"  styleClass="apexemployeeautocomplete" value="{!empValue}"  />
</apex:pageBlock>
</apex:form>
</apex:page>

OutPut Screen 1 :-

Output Screen 2 :-