web-dev-qa-db-ja.com

HTML5 DatalistオプションがクリックされたときのjQueryイベント

私が今持っているもの：

だから私はこのHTML5データリストにたくさんのオプションを入れており、2つのイベントが発生しています。 1つは、ユーザーが「Rick Bross」や「Jack Johnson」（キーアップ）などのオプションを入力している名前の配列に一致するものを入力したときです。ユーザーが名前の入力を開始すると起動する別のイベント。ポップアップし、ユーザーが下矢印を押して、「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);
});
jqueryhtmloptionhtml-datalist
19
Rick Bross

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

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

jsfiddle を試してみました。

18
likeitlikeit

入力フィールドで「select」イベントをリッスンすることもできます。

$('#name').bind('select', function() {
    // handle input value change
});
0
Gilles Hooghe