событие jQuery при нажатии опции HTML5 Datalist

что у меня сейчас:

Итак, у меня есть этот HTML5 Datalist с кучей опций в нем, и у меня есть 2 события. Один, когда пользователь вводит что-то, что соответствует чему-то массиву имен, который заполняет такие параметры, как "Рик Бросс" или "Джек Джонсон" (keyup). Другое событие, которое срабатывает, когда пользователь начинает вводить имя, появляется, пользователь стрелки вниз, и нажимает "enter" (изменить).

проблема:

I нужно событие для запуска, когда пользователь нажимает одну из раскрывающихся опций, прежде чем он вводит полное имя, и прежде чем объект будет размыт. Если пользователь нажимает один прямо сейчас, прежде чем имя будет полностью напечатано, события 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);
});
17
html-datalist html5 jquery option

3 ответов

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

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

Я jsfiddle для вас, чтобы попробовать его.

16

вы также можете прослушать событие "select"в поле ввода.

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

для обработки события click only вот решение.

$("#book_search").bind('select', function () {
    alert("changed");   
});
-1