web-dev-qa-db-ja.com

アイテムが選択されるか入力された入力がリスト内のアイテムと一致する場合のHTML5データリストのjQueryイベント

私は以下のようなデータリストを持っています-

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1"/>  
    <option value="Faizan2"/>   
</datalist>

私が欲しいのは、アイテムが完全に入力されたとき（たとえば、ユーザーが「Adnan1」を完全に入力したときに入力ボックスに入力したとき）、またはリストから選択されたとき、イベントが必要です。いくつかのアプローチを試しましたが、両方とも今のところ役に立ちません。アプローチは-

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

これに関する問題は、入力がフォーカスを外したときにのみイベントがトリガーされることです。画面のどこかをクリックすると。

私も試しました

$("#name").bind('change', function () {
    console.log('changed'); 
});

入力するたびにコールバックがトリガーされます。実際に、アイテムが完全に選択されたときにAJAXを呼び出す必要があります。入力またはドロップダウンから選択してください。

最初のアプローチは、ユーザーの観点から見ると、余分なクリックを行う必要があるため、ユーザーの観点からは良くありません。

私が欲しいのは、ユーザーが選択したか、完全な文を入力したときのイベントだけです。これを達成する方法はありますか？私が行方不明であり、それが私の問題を解決することができるイベント。

javascriptjqueryhtml5javascript-events
24
Mohammad Adnan

最新のブラウザ では、inputイベントを使用できます。例：

$("#name").on('input', function () {
    var val = this.value;
    if($('#allNames option').filter(function(){
        return this.value.toUpperCase() === val.toUpperCase();        
    }).length) {
        //send ajax request
        alert(this.value);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1" />
    <option value="Faizan2" />
</datalist>

PS：inputイベントのサポートは datalist 要素よりも優れているため、既にdatalist要素を使用している場合は使用しない理由はありません。

43
A. Wolff

以下のように、inputイベントを使用してこのような機能を実現できます。

$(document).ready(function() {
  $('#name').on('input', function() {
    var userText = $(this).val();

    $("#allNames").find("option").each(function() {
      if ($(this).val() == userText) {
        alert("Make Ajax call here.");
      }
    })
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" list="allNames" />
<datalist id="allNames">
  <option value="Adnan1" />
  <option value="Faizan2" />
</datalist>
5
Ankit

シンプルなソリューション

document.getElementById('name').addEventListener('input', function () {
   console.log('changed'); 
});
1
Salman Haider

thisが機能するかどうかを確認します：

var dataList=[];
$("#allNames").find("option").each(function(){dataList.Push($(this).val())})
console.log(dataList);
$("#name").on("keyup focus blur change",function(){
    if(dataList.indexOf($(this).val())!=-1)
console.log("change");
})

Datalistオプションをarrayにプッシュし、イベントkeyup、blur、またはfocusを変更すると、入力値がdatalist配列に存在するかどうかを確認します。

0
Mohmad Taher