Estoy desarrollando un formulario y usando jQuery UI Autocomplete. Cuando el usuario selecciona una opción, quiero que la selección aparezca en un espacio agregado al padre<p> etiqueta. Entonces quiero que el campo se borre en lugar de rellenarse con la selección.

Tengo el lapso que parece estar bien, pero no puedo hacer que el campo se despeje.

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

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 enloquecedor es que casi la función exacta funciona bien si ignoro el autocompletado, y solo tomo medidas 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 hacer que el autocompletado funcione con múltiples selecciones. Si alguien tiene alguna sugerencia para eso, sería bienvenido.