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>
<div id="main">
<p>
<a href="#" rel="index,follow">Codepoet</a>
</p>
Enter Arrival Time: <div class="dropdown-arrow"> <input type="text" id="autocomplete" /></div>
</div>
CSS
.dropdown-arrow{
position: relative;
display: inline-block;
}
.dropdown-arrow::before{
position: absolute;
content: " \2193";
top: 0px;
right: -8px;
height: 20px;
width: 20px;
}
a{
text-decoration:none;
}
#main{
border:1px solid black;
width:400px;
height:100px;
margin:auto;
}
p{
text-align:center;
font-size:20px;
}
JavaScript
$(function(){
var games = ["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"];
$("#autocomplete").autocomplete({
source: games
});
});