jqueryクリックがデータリストのオプションでトリガされていない

Question

jquery ajax検索を実行し、データリストオプションでレスポンスを出力するようになりました。データリストのオプションをクリックするとイベントがトリガされます。これらのオプションは、 ajaxコール、入力フィールドに何かを書くと、オプションの値が表示されますが、クリックすると警告ボックスを表示します。次のコードを試してみましたが、動作していない、エラーを出さず、イベントをトリガーしていないというコードです。

Answer 1

私はdatalist要素は任意のイベントがあり、私は考えることができる最高のテキストフィールドにinputをフックするとは思いません。ただし、datalistからの選択肢をクリックするだけでなく、すべての変更に対応できます。あなたのコメントから

$(document).ready(function() { 
 
    $(document).on("input", "input[type=text]", function() { 
 
    log("got input '" + this.value + "'"); 
 
    }); 
 
}); 
 
function log(msg) { 
 
    $("<p>").text(msg).appendTo(document.body); 
 
}

<input type="text" name="search" class="form-control search" list="res"> 
 
<datalist id="res"> 
 
    <option class="res-opt">Mark</option> 
 
    <option class="res-opt">Stewart</option> 
 
</datalist> 
 
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>

：私が欲しいもの

が唯一のデータリスト

のオプションをクリックし上の任意のイベントをトリガすることである私が考えることはできませんそれを行うための方法のいずれか。私たちできる行うには、ハンドラをトリガされた場合にのみ、入力の値がdatalistオプションのいずれかと一致とinputイベントが発生します：

$(document).ready(function() { 
 
    var listOptions = $("#res option").map(function() { 
 
    return this.value; 
 
    }).get(); 
 
    $(document).on("input", "input[type=text]", function() { 
 
    if (listOptions.indexOf(this.value) != -1) { 
 
     log("Got option '" + this.value + "'"); 
 
    } 
 
    }); 
 
}); 
 
function log(msg) { 
 
    $("<p>").text(msg).appendTo(document.body); 
 
}

<input type="text" name="search" class="form-control search" list="res"> 
 
<datalist id="res"> 
 
    <option class="res-opt">Mark</option> 
 
    <option class="res-opt">Stewart</option> 
 
</datalist> 
 
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>

の、ではありませんもちろん、まったく同じことですが、あなたと同じくらい近くにいると思います。