jQuery的自动填充/自动完成没有下拉

Question

我正在尝试对输入元素实施“自动填充”功能。

基本上，它接受范围为（2000-20012）的4位数的年份作为输入。 我想知道当用户输入年份的第一位数字时，是否可以自动填充输入（类似于Chrome的URL窗格，当您键入以前输入的内容时）。

例如，当用户键入“ 2”时，输入应自动填充为2000。然后，用户可以使用“向上”和“向下”箭头来循环显示年份。 自动填充功能不应基于之前的搜索，而应以上述方式工作。 此外，它不应具有下拉菜单。

我进行了搜索，但只发现带有下拉菜单的自动完成功能，但没有自动填充功能。 我还尝试了上下循环部分的<input type="number" /> ，但是它没有自动填充功能，并且在Firefox中不起作用。

是否有jQuery解决方案？

之后编辑：

我找到了dateEntry插件，但找不到使年份显示为4位数字的方法。 尝试了各种日期格式，例如'Y' ， 'yyyy' ， '/Y'但还没有运气。 有谁知道正确的格式？

Answer 1

我确定它并不完美。 但这可以给您一个开始：

    <div id="wrapper" style="border:1px solid #333;width:200px;max-width:200px;overflow:hidden;display:block;">
        <div contenteditable="true" id="myTxt" onfocus="$(this).attr('style','padding-left:5px;min-width:20px;border:none;width:auto;display:inline;')" onblur="$(this).attr('style','width;auto;display:inline;');" style="padding-left:5px;min-width:20px;border:none;width:auto;display:inline;"></div>
        <input type="text" id="suggestions" placeholder="" onfocus="$(this).prev().focus();updateValue(this);" style="border:none; solid;width:auto;"/>
    </div>

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
function updateValue(element){
     var value = $(element).attr('placeholder');
     $('#myTxt').html( $('#myTxt').html() +value);
     $(element).attr('placeholder','');
}
$(document).bind('keyup', function(){
    showSuggesstions($('#myTxt'));
});
function showSuggesstions(element) {
    var list='';        
    var value = $(element).text();
    if(!value)
        return;
    if(value.length==4){
        $('#suggestions').attr('placeholder','');
        return;
    }
    for(var val=2000; val< 3000; val++){
        if( (val+'').indexOf(value) == 0){
            list = (val+'').substring(value.length, val.length);
            break;
        }
    }
    $('#suggestions').attr('placeholder', list);
}
</script>