Limpe o campo do formulário após selecionar o jQuery UI Autocomplete


97

Estou desenvolvendo um formulário e usando o jQuery UI Autocomplete. Quando o usuário seleciona uma opção, quero que a seleção apareça em um intervalo anexado à <p>tag pai . Em seguida, quero que o campo seja limpo em vez de ser preenchido com a seleção.

O intervalo parece bom, mas não consigo limpar o campo.

Como você cancela a ação de seleção padrão do jQuery UI Autocomplete?

Aqui está o meu 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>");
    }
});

Simplesmente fazer $(this).val("");não funciona. O que é enlouquecedor é que quase a função exata funciona bem se eu ignorar o preenchimento automático e apenas agir quando o usuário digitar uma vírgula como esta:

$('[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>");
    }
});

O resultado final real é fazer com que o preenchimento automático funcione com várias seleções. Se alguém tiver alguma sugestão para isso, será bem-vindo.

Respostas:


182

Adicione $(this).val(''); return false; ao final de sua selectfunção para limpar o campo e cancelar o evento :)

Isso impedirá que o valor seja atualizado. Você pode ver como funciona em torno da linha 109 aqui .

O código ali verifica se há falso especificamente:

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

Fantástico! Eu me sinto boba. Agora eu sei, e saber é metade da batalha.
Jon F Hancock,

Ele consertou. Tentei aceitar, mas ele me disse que não poderia por mais 7 minutos. Aceitaram. Obrigado.
Jon F Hancock,

1
Deixe-me apenas acrescentar que, depois de retornar falso, você não precisa mais definir o valor sozinho (ou seja, não há necessidade de $(this).val('');)
Uri,

9
Se alguém quiser que o campo de entrada esteja livre de qualquer valor, acredito que uma chamada para .val('')ainda deve ocorrer. O return false;impedirá apenas que o texto do item selecionado apareça no campo de entrada.
Ryan,

1
Uri está incorreto e Ryan está correto. Você precisa retornar false para evitar que seja atualizado com sua seleção e, adicionalmente, precisa de $ (this) .val ('') se quiser limpá-lo.
mynameistechno

19

Em vez de retornar false, você também pode 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();
}

Suspeito que esse método seja mais eficiente do que a resposta aceita.
dlsso

6

return false é necessário dentro do retorno de chamada selecionado, para esvaziar o campo. mas se você quiser controlar novamente o campo, ou seja, definir o valor, terá que chamar uma nova função para sair da interface do usuário.

Talvez você tenha um valor de prompt como:

var promptText = "Enter a grocery item here."

Defina-o como o val do elemento. (no foco, definimos como '').

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

Olá, tenho uma pergunta diferente sobre como salvar o prompt. Não posso usar marcadores de posição por motivos técnicos. Isso foi perfeito, OBRIGADO!
hgolov

5

Funciona bem para mim.

Após selecionar o evento, usei a mudança de evento.

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

Eu sou um iniciante!


0

Tente isto

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

0

Eu apenas resolvi forçando a perder o foco:

$('#select_id').blur();
printResult();
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.