jquery - bootstrap - html5 datalist option selected

Evento jQuery cuando se hace clic en la opción HTML5 Datalist

Question

Lo que tengo ahora:

Así que tengo este Datalist HTML5 con un montón de opciones en él, y tengo 2 eventos de disparo. Uno cuando el usuario escribe algo que coincide con algo con el conjunto de nombres que está poblando las opciones como "Rick Bross" o "Jack Johnson" (keyup). Otro evento que se activa cuando un usuario comienza a escribir el nombre, aparece, las flechas del usuario hacia abajo y pulsa "enter" (cambiar).

El problema:

Necesito un evento para activarlo cuando el usuario haga clic en una de las opciones desplegables, ANTES de que escriba el nombre completo y antes de que el objeto se vea borroso. Si un usuario hace clic en uno ahora mismo antes de que se escriba completamente el nombre, los 2 eventos solo activarán la función una vez que la entrada esté borrosa.

El marcado:

<datalist id="potentials">
    <option value="Rick Bross">  
    <option value="Jack Johnson">  
    <option value="Rick Bross">  
    <option value="Rick Bross">   
</datalist>

Eventos y funciones de 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);
});

Answer 1

Para manejar click solo evento aquí está la solución.

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

Answer 2

También puede escuchar el evento ''seleccionar'' en el campo de entrada.

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

Answer 3

Utilice el evento de input lugar de los otros eventos. En realidad está diseñado para cubrir lo que quieres:

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

Hice un jsfiddle para que lo pruebes.