1

Eu tenho uma tela de cadastro que tem um campo de tags.. Conforme ele vai preenchendo e pressiona enter, fica assim:

inserir a descrição da imagem aqui

Vamos supor que ele cadastrou, mas esqueceu de dar enter em uma tag, por exemplo: inserir a descrição da imagem aqui

Essa tag se perderá, quando ele clicar em editar esse cadastro vai ter somente A, B e C.

Como poderia fazer para verificar isso? Quando ele clicar em cadastrar, ver se todos os elementos estão dentro de: $('.chips').material_chip('data')); se um não tiver, inserir.

4
  • Creio não haver possibilidade para isto, pois, como você vai inserir algo que não tem? Este chips funcionam justamente com a tecla enter para ficar registrados em data, se a pessoa digitou algo no input e esqueceu de apertar enter é como se aquele input estivesse vazio.
    – LeAndrade
    Commented 12/12/2018 às 13:11
  • @LeAndrade não daria para no onBlur fazer o "enter"?
    – hugocsl
    Commented 12/12/2018 às 13:14
  • 1
    @hugocsl Cara pela breve lida na documentação (até por que é bem pouca) o evento padrão é o enter mesmo, e não vi métodos para se mudar isto. Acho que mesmo criando uma função com blur o chips espera-rá o enter para guardar em data.
    – LeAndrade
    Commented 12/12/2018 às 13:20
  • putz... vou pesquisar mais afundo e ver se encontro algo.
    – dds
    Commented 12/12/2018 às 13:27

1 Resposta 1

3

Pode fazer desta forma:

// evento submit do formulário
$("form").on("submit", function(){

   // pega o valor do que foi digitado e não foi incluído no chip
   var chipp = $(".chips input").val().trim();

   // se não for null
   if(chipp){
      // adiciona o chip ao array
      var obj = {};
      obj["tag"] = chipp;
      $('.chips').material_chip('data').push(obj);

      // renderiza todos os chips
      // se você só precisa da array, talvez o código abaixo não seja necessário
      $('.chips').material_chip({
         data: $('.chips').material_chip('data')
      });


   }
});

Exemplo sem submeter o formulário para visualização:

$("form").on("submit", function(e){
   
   e.preventDefault();
   var chipp = $(".chips input").val().trim();
   
   if(chipp){
      var obj = {};
      obj["tag"] = chipp;
      $('.chips').material_chip('data').push(obj);

      $('.chips').material_chip({
         data: $('.chips').material_chip('data')
      });

      console.log($('.chips').material_chip('data'));

   }
});


$('.chips').material_chip('data');
$('.chips').material_chip();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<form method="post" action="teste2.php">
<div class="chips">
   <input name="tags" class="custom-class" placeholder="Digite as tags">
</div>
<button>OK</button>
</form>

1
  • Excelente resposta Sam, neste Materialize tem que ser feito tudo por fora, pq por padrão é muito mal implementado. Por exemplo, acho que deveria ir guardando no data com espaço ao invés de enter, se a pessoa der espaço e continuar digitando ele grava como um string só, tbm se as tags quebrarem o tamanho do input, não grava mais no data.
    – LeAndrade
    Commented 12/12/2018 às 14:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .