0

入力要素に「オートフィル」機能を実装しようとしています。

基本的に、範囲 (2000 ～ 20012) の 4 桁の年を入力として受け入れます。ユーザーが年の最初の数字を入力したときに、入力オートフィル自体 (以前に入力したものを入力するときの Chrome の URL ペインに似ています) が可能かどうかを知りたいです。

たとえば、ユーザーが「2」と入力すると、入力はたとえば 2000 で自動入力されます。その後、ユーザーは「上」と「下」の矢印を使用して年を循環させることができます。自動入力は以前の検索に基づくべきではなく、上記の方法で機能するだけです。また、ドロップダウンがあってはなりません。

検索して検索しましたが、ドロップダウンでオートコンプリートしか見つかりませんでしたが、オートフィルは見つかりませんでした。上下のサイクリング部分も試してみました<input type="number" />が、自動入力がなく、Firefox では動作しません。

このためのjQueryソリューションはありますか?

後で編集：

dateEntry プラグインを見つけましたが、年を 4 桁で表示する方法が見つかりません。'Y'、などのさまざまな日付形式を試しましたが'yyyy'、'/Y'まだ運がありません。正しいフォーマットを知っている人はいますか？

4

1 に答える 1

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>
于 2012-11-28T12:27:21.447 に答える