campo de formulario claro después de seleccionar para la interfaz de usuario jQuery Autocompletar

Question

Estoy desarrollando un formulario, y el uso de jQuery UI de autocompletar. Cuando el usuario selecciona una opción, quiero que la selección para que aparezca en un lapso anexa a la etiqueta <p> padres. Entonces quiero el campo para borrar en lugar de estar ocupado con la selección.

Tengo el lapso que aparece muy bien, pero no puedo conseguir el terreno para borrar.

¿Cómo se cancela seleccione la acción predeterminada del interfaz de usuario jQuery Autocompletar?

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 haciendo $(this).val(""); no funciona. Lo que es exasperante es que casi la función exacta bien funciona si no hago caso de autocompletar, y acaba de tomar acción 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 conseguir autocompletar para trabajar con múltiples selecciones. Si alguien tiene alguna sugerencia para que, serían bien recibidos.

Answer 1

Agregar $(this).val(''); return false;  al final de su función select para limpiar el campo y cancelar el evento:)

Esto evitará que el valor de ser actualizado. Se puede ver cómo funciona href="http://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js" alrededor de la línea 109 que aquí .

El código en allí comprueba falsa específicamente:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}

Answer 2

En lugar de falsa retorno también se puede utilizar event.preventDefault ().

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

Answer 3

false retorno es necesaria dentro del selecto de devolución de llamada, para vaciar el campo. pero si usted quiere controlar de nuevo el campo, es decir, establecer el valor, usted tiene que llamar a una nueva función para salir de la interfaz de usuario.

Tal vez usted tiene un valor de solicitud, tales como:

var promptText = "Enter a grocery item here."

Establecer como val del elemento. (En el enfoque que se pone a '').

$("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
}

Answer 4

Funciona bien para mí.

Después seleccione caso, he usado el cambio evento.

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

Soy un principiante!

Answer 5

  

Probar

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

Answer 6

Yo sólo lo resolvió obligar a perder el foco:

$('#select_id').blur();
printResult();