jQuery Autocomplete - start at a particular value

by Matthew Keefe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<input id="time">

CSS

.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
    width: 100px;
}
.ui-menu-item {
    cursor: pointer;
}

JavaScript

var j$ = jQuery.noConflict();

function log(item) { if(j$.browser.mozilla) { console.log(item); } }

function init()
{
    var times = [];
    for (var i=0;i<24;i++) {
        for (var j=0;j<4;j++) {
            var hour = (i>12?(i-12)+"":(i==0?"12":i)+"");
            var mins = "00"; 
            var AMPM = (i>=12?" PM":" AM");
            if(j==0) { mins="00"; } 
            if(j==1) { mins="15"; } 
            if(j==2) { mins="30"; } 
            if(j==3) { mins="45"; }
            times.push(hour+":"+mins+AMPM);
        }
    }

    // initialize the autocompletes
    j$("#time")
        .autocomplete({
            source: times,
            minLength: 0,
            delay: 0,
            autoFocus: true,
            open: function () {
                var menu = j$(this).data("autocomplete").menu
                    , now = new Date()
                    , hours = now.getHours()
                    , minutes = now.getMinutes()
                    , ampm = hours >= 12 ? " PM" : " AM"
                    , timeStr
                    , $item;

                hours = hours > 12 ? hours - 12 : hours;
                minutes = (minutes - minutes % 15) + 15;
                
                if (minutes === 60) {
                    minutes = 0;
                    hours++;
                }
                
                timeStr = hours + ":" 
                    + (minutes < 10 ? "0" + minutes : minutes) 
                    + ampm;
                
                $item = 
                    menu.element.find(":contains(" + timeStr + ")");
                
                menu.activate(new j$.Event("mouseover"), $item);               
                menu.element.scrollTop(
                    $item.offset().top - 
                    menu.element.offset().top + 
                    menu.element.scrollTop());
            }
        })
        .bind("click",function(){
            j$(this).autocomplete("search","");
        });
}

j$(document).ready(init);