20

私が今持っているもの：

したがって、この HTML5 データリストには多数のオプションが含まれており、2 つのイベントが発生しています。1 つは、ユーザーが、「Rick Bross」や「Jack Johnson」(keyup) などのオプションに入力されている名前の配列に一致する何かを入力したときです。ユーザーが名前の入力を開始すると発生する別のイベントがポップアップし、ユーザーが下向き矢印を押して「Enter」(変更) を押します。

問題：

ユーザーがドロップダウン オプションの 1 つをクリックしたとき、フルネームを入力する前、オブジェクトがぼやける前に、イベントを発生させる必要があります。名前が完全に入力される前にユーザーが 1 つをクリックすると、2 つのイベントは、入力がぼやけているときにのみ関数を起動します。

マークアップ:

<datalist id="potentials">
    <option value="Rick Bross">  
    <option value="Jack Johnson">  
    <option value="Rick Bross">  
    <option value="Rick Bross">   
</datalist>

Javascript イベントと関数:

window.checkModelData = function(ele)
{
    var name = $(ele).val().replace(" ", "");
    var mod = potentialModels[name];
    if(mod) {
        loadModelData(name);
    }
}

function loadModelData(name) {
    var mod = potentialModels[name];
    $("#address").val(potentialModels[name].address);
    $("#city").val(potentialModels[name].city);
    $("#state").val(potentialModels[name].state);
    $("#email").val(potentialModels[name].email);
    $("#phone").val(potentialModels[name].phone);
    $("#zip").val(potentialModels[name].zip);
}

$("#name").keyup(function(){

    window.checkModelData(this);

});
$("#name").change(function(){

    window.checkModelData(this);
});
4

3 に答える 3

20

input他のイベントの代わりにイベントを使用してください。実際には、あなたが望むものをカバーするように設計されています:

$("#name").bind('input', function () {
    window.checkModelData(this);
});

試してみるためにjsfiddleを作成しました。

于 2013-05-03T18:44:27.130 に答える