Catch Ids Tagsmanager

Question

I have a form with several fields, one of them I use Tagsmanager to insert tags (registered clients), now when I send this form I need to save the ID’s of these registered clients in the same field, separated by comma.

I tried using the Hidden field and also the parameter: Hiddentaglistid, and it didn’t work.

Documentation: https://maxfavilli.com/jquery-tag-manager

HTML:

<div class="form-group col-xs-6">
<label for="parte_interessada">Parte interessada</label>
<input type="text" class="typeahead cliente form-control" id="cliente" name="cliente">
<div class="tags_cliente"></div>

---

JAVASCRIPT

<script>
    $(document).ready(function() {
        var tagApi = $(".cliente").tagsManager({
            tagsContainer: '.tags_cliente',
        });

        var cliente= new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.whitespace,
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: "busca-cliente.php?query=%QUERY",
                wildcard: "%QUERY"
            }
        });

        $('#cliente').typeahead(null, {
                name: 'cliente',
                display: 'label',
                source: cliente,
                afterSelect: function(item) {
                    tagApi.tagsManager("pushTag", item);
                },
                templates: {
                    header: '<strong>&nbsp;&nbsp;&nbsp;&nbsp;Clientes encontrados:</strong>',
                    empty: [
                        '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Não foram encontrados resultados com os termos informados!'
                    ]
                },
            })
        );

The autocomplete search returns:

while($row = $result->fetch_assoc()){
     $data[] = array(
        'label' => $row['nome'],
        'value' => $row['id'],
    );
}

echo json_encode($data);

When I use the "typeahead:Selected" function, I can access "label" or "value".

.on('typeahead:selected', function(event, data){
    $('#id_cliente').val(data.value);
});

However, using the "tm:pushed" and "tm:spliced" functions you suggested, I can’t access either "label" or "value". The item parameter returns only the name that is in the tag and item.value gives error. How to add this information in the tag?

---

I tried to adapt the Mahdi-Farhani cometarium in the documentation but I couldn’t either. Follow the link:

github.com/max-Favilli/tagmanager/issues/7

Answer 1

By default when you create a tag its value is added to input by name Hidden-tags:

<input type="hidden" name="hidden-tags" value="">

Only with this field already possible to get the data on the server, but assuming it does not meet you, I saw on documentation that there is a way for you to control when a tag is inserted/removed:

tm:pushed When a tag is inserted.

jQuery(".tm-input").on('tm:pushed', function(e, tag) {
   alert(tag + " was pushed!");
});

tm:spliced When a tag is removed.

jQuery(".tm-input").on('tm:spliced', function(e, tag) {
   alert(tag + " was removed!");
});

Knowing this, I created a method to create a field input every time a TAG is added and remove that input when your respective tag is removed, so you can make the request by name of input on the server side, this returns to you an array of client data:

<input type="hidden" name="clientes" value="" /> 

$(document).ready(function() {
  $(".tm-input").tagsManager();
  
  //Quando uma tag for adicionada
  $(".tm-input").on('tm:pushed', function(e, item) {

    //Aqui poderia ser item.id dependendo de como você cria tag
      var inputClientes = "<input type='hidden' name='clientes' value='" + item + "' />";
      
      $("#tagsInseridas").append(inputClientes);
      
    });
    
    //Quando uma tag for removida
    $(".tm-input").on('tm:spliced', function(e, tag) {
      $("input[name='clientes'][value='" + tag +"']").remove();
    });
    
    $("#visualizar").on("click", function(){
      if($("input[name='clientes']").length > 0){
        console.log($("input[name='clientes']"));
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.css" />

<div>
  <p id="hint">Preencha o nome da tag e pressione enter para criá-la:</p>
  <input type="text" name="tags" placeholder="Tags" class="tm-input"/>
</div>
<div id="tagsInseridas">

</div>
<button type="button" id="visualizar">
  Visulizar inputs criados
</button>