2011-09-16 21 views
5

Estoy tratando de averiguar cómo hacer un "opuesto" a un jquery ui seleccionar. Cuando alguien no selecciona una opción y simplemente escribe "jquery something", la salida será: "new input: jquery something". Sin embargo, cuando se selecciona "jquery", sería bueno que de alguna manera solo "seleccione de la lista: jquery" y evite la propagación de pulsaciones de teclas. Sin embargo, ambos eventos disparan. Estoy tratando de hacerlo uno o el otro.jquery ui autocompletar: activar solo cuando el elemento no está seleccionado

<input class="test" type="text" /> 

<script> 
$('.test').autocomplete({ 
    select: function (event, ui) { 
     alert('selected from list: ' + ui.item.label); 
     event.preventDefault(); 
     return false; 
    }, 
    source: ["jquery", "jquery ui", "sizzle"] 
}); 
$('.test').live('keypress', function (e) { 
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { 
     alert('new input: ' + $(this).val()); 
    } 
}); 
</script> 

Esto va con el supuesto de que la tecla "enter" se utiliza para seleccionar una opción del menú de la interfaz de usuario.

+0

Cuando ejecuto esto, se muestra claves como yo escriba, pero si selecciono un valor, no aparece ningún evento de pulsación de tecla, incluso con las teclas de flecha. Por favor aclare el problema, o al menos dígame cuál es el uso final de esto para que pueda entender mejor cómo ayudarlo. –

+0

Lo cambiaré para alertarme. Console.log es para Firebug. También haga sus entradas con la tecla "enter". – Parmenides

Respuesta

8

Puede lograr esto usando el evento autocompletechange. El uso de este evento, se puede determinar si el usuario ha seleccionado una opción o escrito algo en que no estaba en la lista:

$("#auto").autocomplete({ 
    source: ['hi', 'bye', 'foo', 'bar'], 
    change: function(event, ui) { 
     console.log(this.value); 
     if (ui.item == null) { 
      $("span").text("new item: " + this.value); 
     } else { 
      $("span").text("selected item: " + ui.item.value); 
     } 
    } 
}); 

Ejemplo:http://jsfiddle.net/Ne9FH/

+1

Eso funcionaría muy bien si pudiera desencadenar el evento de cambio con la introducción de tecla y la fuente de datos dinámica. Pero la mejor respuesta aquí, y no mencioné nada sobre la fuente de datos. – Parmenides

Cuestiones relacionadas