Autocomplete textbox using jQuery

Autocomplete textbox with jQuery, how to autocomplete textbox with jquery, how to autocomplete textbox with jquery with predefined values, how to autocomplete textbox with jquery with specific values, autocomplete textbox using jquery, how to autocomplete textbox using jquery

by Ganesh

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<div id="main">
<p>
<a href="#" rel="index,follow">Codepoet</a>
</p>
&nbsp;Enter Arrival Time: <input type="text" id="ArrivalTime" maxlength="5" />
</div>

CSS

a{
  text-decoration:none;
}
#main{
  border:1px solid black;
  width:400px;
  height:100px;
  margin:auto;
}
p{
  text-align:center;
  font-size:20px;
}
.timeError{
  border:1px red solid;
}

JavaScript

$(function(){
var time = ["00:00","00:05","00:10","00:15","00:20","00:25","00:30","00:35","00:40","00:45","00:50","00:55","01:00","01:05","01:10","01:15","01:20","01:25","01:30","01:35","01:40","01:45","01:50","01:55","02:00","02:05","02:10","02:15","02:20","02:25","02:30","02:35","02:40","02:45","02:50","02:55","03:00"];
/* $('#ArrivalTime').timepicker({
        'timeFormat':'HH:mm',
       "interval": 05
        }); */

$("#ArrivalTime").autocomplete({
source: time
});


var regex = new RegExp("^[0-9:]*$");

$('#ArrivalTime').bind("keypress", function (event) {
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
        event.preventDefault();
        return false;
    }
});   


var regex1=new RegExp("^([0-1][0-9]|[2][0-3]):([0-5][0-9])$");

$("#ArrivalTime").blur(function(){
   var reg = /^([0-1][0-9]|[2][0-3]):([0-5][0-9])$/;
   if (reg.test($("#ArrivalTime").val())) {
   $(this).removeClass("timeError");
   console.log("time is valid.");
   }
   else{
   $(this).addClass("timeError");
   console.log("time is not valid.");
   }
});


});