Javascript jquery自动填充/自动完成，不带下拉菜单

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

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

例如，当用户键入“2”时，输入应该自动填充，例如2000。然后，用户可以使用“向上”和“向下”箭头来循环年份。自动填充不应基于以前的搜索，而应以上述方式工作。而且，它不应该有下拉列表

我搜索了又搜索，但只找到了带有下拉列表的自动完成，但没有自动填充。我还尝试了上下循环部分的

，但它没有自动填充功能，在Firefox中也不起作用

有jQuery解决方案吗

以后编辑：

    <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>

---

我找到了dateEntry插件，但我找不到一种方法让它以4位数字显示年份。尝试了各种日期格式，如

'Y'

，

'yyyy'

，

'/Y'

，但还没有成功。有人知道正确的格式吗？

我相信它并不完美。但这可以给你一个开始：

    <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>

函数updateValue（元素）{
var值=$（元素）.attr（'占位符'）；
$（'#myTxt'）.html（$（'#myTxt'）.html（）+值）；
$（元素）.attr（'占位符'，''）；
}
$（document）.bind（'keyup'，function（）{
showSuggestions（$（'#myTxt'））；
});
功能显示建议（元素）{
var列表=“”；
var值=$（元素）.text（）；
如果（！值）
返回；
if（value.length==4）{
$（'建议'）.attr（'占位符'，''）；
返回；
}
用于（var val=2000；val<3000；val++）{
如果（（val+“”）.indexOf（value）==0）{
list=（val+''）.substring（value.length，val.length）；
打破
}
}
$（'建议'）.attr（'占位符'，列表）；
}

您好，谢谢您的输入。我尝试过各种具有自动完成功能的插件，当用户开始编写输入时，会显示一个下拉列表。问题是，正如我在帖子中指出的，我需要自动填充。年份应该已经出现在输入中，不需要下拉。我的新答案有效，但需要更多的工作。这只是基本的