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.