Borrar campo de formulario después de seleccionar para autocompletar jQuery UI

97

Estoy desarrollando un formulario y usando jQuery UI Autocomplete. Cuando el usuario selecciona una opción, quiero que la selección aparezca en un intervalo adjunto a la <p>etiqueta principal . Entonces quiero que el campo se borre en lugar de que se rellene con la selección.

El lapso parece estar bien, pero no puedo despejar el campo.

¿Cómo se cancela la acción de selección predeterminada de jQuery UI Autocomplete?

Aquí está mi código:

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

Simplemente hacer $(this).val("");no funciona. Lo que es enloquecedor es que casi la función exacta funciona bien si ignoro la función de autocompletar y simplemente actúo cuando el usuario escribe una coma como tal:

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

El resultado final real es que el autocompletado funcione con múltiples selecciones. Si alguien tiene alguna sugerencia al respecto, será bienvenido.

Jon F Hancock
fuente

Respuestas:

182

Agregue $(this).val(''); return false; al final de su selectfunción para borrar el campo y cancelar el evento :)

Esto evitará que se actualice el valor. Puede ver cómo funciona alrededor de la línea 109 aquí .

El código allí busca falso específicamente:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}
Nick Craver
fuente
¡Fantástico! Aunque me siento tonto. Ahora lo sé, y saber es la mitad de la batalla.
Jon F Hancock
Lo solucionó. Traté de aceptar, pero me dijo que no podía durante 7 minutos más. Aceptado. Gracias.
Jon F Hancock
1
Permítanme agregar que una vez que devuelvan falso, ya no es necesario que establezcan el valor usted mismo (es decir, no es necesario $(this).val('');)
Uri
9
Si uno quiere que el campo de entrada esté libre de cualquier valor, creo .val('')que aún debe ocurrir una llamada a . El return false;sólo evitará que el texto del elemento seleccionado de aparecer en el campo de entrada.
Ryan
1
Uri es incorrecto y Ryan tiene razón. Debe devolver falso para evitar que se actualice con su selección, y además necesita $ (this) .val ('') si desea borrarlo.
mynameistechno
19

En lugar de devolver falso, también puede usar event.preventDefault ().

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}
Paul Schröder
fuente
Sospecho que este método es más eficiente que la respuesta aceptada.
dlsso
6

return false es necesario dentro de la devolución de llamada select, para vaciar el campo. pero si desea volver a controlar el campo, es decir, establecer el valor, debe llamar a una nueva función para salir de la interfaz de usuario.

Quizás tenga un valor inmediato como:

var promptText = "Enter a grocery item here."

Configúrelo como el valor del elemento. (en el enfoque lo ponemos en '').

$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}
captahab
fuente
Hola, tenía una pregunta diferente sobre cómo guardar el mensaje. No puedo usar marcadores de posición por razones técnicas. Esto fue perfecto, ¡GRACIAS!
hgolov
5

Funciona bien para mi.

Después de seleccionar el evento, utilicé el cambio de evento.

 change:function(event){
   $("#selector").val("");  
   return false;
 }

¡Soy un principiante!

Silvana Saly Viana
fuente
0

Prueba esto

select: function (event, ui) {
    $(this).val('');
    return false;       
}
ImBhavin95
fuente
0

Lo acabo de resolver forzando a perder el foco:

$('#select_id').blur();
printResult();
Mireia Gimeno
fuente