Событие jQuery для datalist HTML5, когда элемент выбран или вводит совпадение ввода с элементом в списке

У меня есть datalist, как показано ниже -

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

То, что я хочу, - когда элемент вводится полностью (например, в поле ввода, когда пользователь полностью набирает "Adnan1" ) или выбран из списка, я хочу событие. Я попробовал пару подходов, но оба мне пока не помогают. Подходы -

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

проблема с этим - это событие запускается только тогда, когда вход выходит из фокуса I.e. когда я нажимаю где-то на экране.

Я также пробовал

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

но обратный вызов запускается каждый раз при вводе. Мне действительно нужно сделать вызов AJAX, когда элемент полностью выбран. Либо через ввод-вывод, либо путем выбора из раскрывающегося списка.

Первый подход плохо для пользователя, потому что он должен сделать дополнительный клик, а второй имеет недостаток, так как для каждой буквы запускается событие.

Все, что я хочу, это событие, когда либо пользователь сделал выбор, либо набрал полное предложение. есть ли способ достичь этого? любое событие, которое я пропущу, и которое может решить мою проблему.

Ответ 1

В современных браузерах вы можете использовать событие 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>

Ответ 2

Вы можете использовать событие 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>

Ответ 3

Простое решение

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

Ответ 4

Проверьте, работает ли 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 в массив, а при изменении события, размытии или фокусе, я проверяю, существует ли входное значение в моем массиве datalist.

Ответ 5

Хаки как грех, но работает на меня. (Обратите внимание, что если вы набираете "Rum-Cola", это не останавливается на опции "Rum")

const opts = $("option").map(function(){return  this.value;}).get();

$("#favourite-drink").on("keydown", function(e){
  if(e.key){ // in case of mouse event e.key is 'undefined'
    if (e.key === "Enter") { // looks like user wants to confirm the choice
      if(opts.indexOf(this.value) >= 0){
        this.blur();
        console.log("Selected: " + this.value);
      }
    }
    else {
      this.setAttribute("data-keyboardinput", "true"); // remember that it keyboard event

      setTimeout(function(){ //and keep it in memory for 100ms
        this.removeAttribute("data-keyboardinput")
      }.bind(this), 100);
    }
  }
});

$("#favourite-drink").on("input", function(){
  if(!this.dataset.keyboardinput && opts.indexOf(this.value) >= 0){ // if it not a key press followed event
    console.log("Selected: " + this.value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Choose a drink:</p>
  <input id="favourite-drink" list="drinks">
  <datalist id="drinks">
    <option value="Rum"></option>
    <option value="Rum-Cola"></option>
    <option value="Vodka"></option>
  </datalist>