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

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.

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 );
}

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();
}

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
}

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!

Prueba esto

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

Lo acabo de resolver forzando a perder el foco:

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