jquery自动填充/自动完成没有下拉

Posted 2023-02-24

【中文标题】jquery自动填充/自动完成没有下拉

【英文标题】：jquery Autofill/Autocomplete without dropdown

【发布时间】：2012-11-28 12:04:18

【问题描述】：

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

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

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

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

有 jQuery 解决方案吗？

稍后编辑：

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

【问题讨论】：

我的新答案有效，但需要更多工作。它只是基本的

【参考方案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>

【讨论】：

您好，感谢您的意见。我尝试了各种具有自动完成功能的插件，当用户开始编写输入时会显示一个下拉列表。问题是，正如我在帖子中指出的那样，我需要自动填充。年份应该已经出现在输入中，不需要下拉菜单。