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

Question

I am trying to implement an 'autofill' ability to an input element.

Basically, it accepts 4-digit years as input, from a range (2000 - 20012). I'd like to know whether it's possible to have the input autofill itself (similar to Chrome's URL pane when typing something that you have previously typed) when the user types the first digit of the year.

For example, when the user types "2", the input should autofill with, say, 2000. Then, the user could use the 'up' and 'down' arrows to cycle through the years. The autofill should not be based on previous searches, just work in a fashion described above. Also, it should not have a dropdown.

I've searched and searched but only found autocomplete with dropdowns, but no autofill. I also tried the <input type="number" /> for the up and down cycling part, but it does not have autofill and it does not work in Firefox.

Is there a jQuery solution for this?

LATER EDIT:

I found the dateEntry plugin, yet I can't find a way to make it display the year as 4 digits. Tried various date formats such as 'Y' , 'yyyy' , '/Y' but no luck yet. Does anyone know the right format?

Answer 1

I'm sure its not perfect. But this could give you a start:

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