jquery - 使用 jQuery 自动完成，显示结果时，如何从特定值开始？

Question

我有一个 jQuery 自动完成时间输入框。它从中午 12:00 开始按 15 分钟增量列出所有可用时间。我想显示所有结果，但选择最接近现在的时间。有办法做到这一点吗？

这是我到目前为止所拥有的:

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
        })
        .bind("focus",function(){
            j$(this).autocomplete("search","");
        });
}

j$(document).ready(init);

更新

我添加了jsFiddle对于上面的代码。

Answer 1

您可以通过 open 事件以及自动完成使用的底层 menu 小部件的一些技巧来完成此操作:

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;

            /* Build a time string for the current time */
            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 + ")");

            /* Activate the correct menu item: */
            menu.activate(new j$.Event("mouseover"), $item); 

            /* Scroll to the item: */              
            menu.element.scrollTop(
                $item.offset().top -
                menu.element.offset().top + menu.element.scrollTop());
        }
    });

示例: http://jsfiddle.net/DmJup/

这里还有一些需要改进的地方，例如将 open 中的代码重构为几个方法。

我认为允许一个选项(通过插件)让您指定一个函数来确定要选择的选项会很有用。