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中的代码重构为几种方法。

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

Answer 2

（对不起，这是答案而不是评论！显然我不是很“酷”，不能发表评论。）

此区块目前在12:00至13:00之间滚动：

hours = hours > 12 ? hours - 12 : hours;
minutes = (minutes - minutes % 15) + 15;

if (minutes === 60) {
    minutes = 0;
    hours++;
}

应该是：

minutes = (minutes - minutes % 15) + 15;

if (minutes === 60) {
    minutes = 0;
    hours++;
}

hours = hours > 12 ? hours - 12 : hours;

现在它将正确地滚动12:00到1:00。

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

2 个答案: