Campo de formulário limpo após selecionar para a interface do usuário do jQuery preenchimento automático
-
23-09-2019 - |
Pergunta
Estou desenvolvendo um formulário e usando o Autocompleto JQuery. Quando o usuário seleciona uma opção, quero que a seleção entre em um período anexado ao pai <p>
marcação. Então eu quero que o campo limpe, em vez de ser preenchido com a seleção.
Eu tenho o período parecido bem, 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 fazendo $(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 digita uma vírgula 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>");
}
});
O resultado final real é fazer com que o AutoComplete funcione com várias seleções. Se alguém tiver alguma sugestão para isso, eles seriam bem -vindos.
Solução
Adicionar $(this).val(''); return false;
até o final do seu select
funçã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 lá verifica o FALSE especificamente:
if ( false !== self._trigger( "select", event, { item: item } ) ) {
self.element.val( item.value );
}
Outras dicas
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();
}
Retorno Falso é necessário dentro do retorno de chamada selecionado, para esvaziar o campo. Mas se você deseja controlar novamente o campo, ou seja, defina o valor, você deve chamar uma nova função para sair da interface do usuário.
Talvez você tenha um valor imediato, 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
}
Funciona bem para mim.
Após o evento Selecion, usei a alteração do evento.
change:function(event){
$("#selector").val("");
return false;
}
Eu sou um iniciante!
Tente isso
select: function (event, ui) {
$(this).val('');
return false;
}
Acabei de resolver forçando a perder o foco:
$('#select_id').blur();
printResult();