Обработка событий в datalist

347

07 марта 2017, 13:46

Доброго времени суток. Столкнулся с такой проблемой. У меня есть input поле с datalist списком. Мне необходимо, что бы при нажатии на элемент из datalist, происходило какое-либо событие. Тот же alert, хотя бы. $().change работает, когда поле выходит из фокуса, а нужно, что бы сразу при нажатии. Такое возможно?

<input type="text" id="test_input" list="temp_list">
    <datalist id="temp_list">
        <option value="1">
            first
        </option>
        <option value="2">
            second
        </option>
        <option value="3">
            third
        </option>
    </datalist>

Answer 1

Событие input срабатывает тут же при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.

$('#test_input').on('input', function() { 
  console.log($(this).val()); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="test_input" list="temp_list"> 
<datalist id="temp_list"> 
        <option value="1"> 
            first 
        </option> 
        <option value="2"> 
            second 
        </option> 
        <option value="3"> 
            third 
        </option> 
    </datalist>