Twitter typeahead.js - working with array of objects

Question

I am trying to implement a tagsinput + typeahead field for a form, where the source is an array of objects stored in a javascript binding. The value I want to store in the form is the id, but I want to display for users a custom HTML compound by another properties from the object, just like this: http://twitter.github.io/typeahead.js/

When I work with a simple array, I am successfully able to implement this tagsinput + typeahead field input, but it is not working with an array of objects.

Here are an example of array of objects and array of string. Tryed to follow these exemples: http://twitter.github.io/typeahead.js/examples/

// Array of objects
let solicitacoes = [
    {
        "id": "95",
        "documento": "23423/432432",
        "documento_tipo": "156",
        "requerente": 'João'
    },
    {
        "id": "94",
        "documento": "1234/GVJ/2021",
        "documento_tipo": "Memorando",
        "requerente": 'Maria'
    },
    {
        "id": "92",
        "documento": "15000/2021",
        "documento_tipo": "SIPEX",
        "requerente": 'José'
    }
]

$('#adicionarProjetoVincularSolicitacoes').tagsinput({
   typeahead: ({
       source: solicitacoes,
       display: 'documento',
       afterSelect: function () {
           this.$element[0].value = '';
      },
      templates: {
          empty: '<div><strong>No match found</strong></div>',
          suggestion: `<div>${this.documento_tipo} - ${this.documento}</div>
          <div class=mt-1><small>${this.requerente}</small></div>`
      }
   })
})


//Array of string     

let solicitacoes_documento = ["23423/432432", "1234/GVJ/2021", "15000/2021"]

$('#adicionarProjetoVincularSolicitacoesDocumentoApenas').tagsinput({
   typeahead: ({
       source: solicitacoes_documento,
       afterSelect: function () {
           this.$element[0].value = '';
      }
   })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/davidkonrad/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script>
<link href="https://rawgit.com/bootstrap-tagsinput/bootstrap-tagsinput/master/src/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://rawgit.com/bootstrap-tagsinput/bootstrap-tagsinput/master/dist/bootstrap-tagsinput.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>



<div class="form-group col-4" id="adicionarProjetoVincularSolicitacoesDIV">
<label for="adicionarProjetoVincularSolicitacoes">Vincular à solicitações</label>
<input type="text" class="form-control tagsinput typeahead" id="adicionarProjetoVincularSolicitacoes" name="adicionarProjetoVincularSolicitacoes" data-role="tagsinput">
</div>

<div class="form-group col-4" id="adicionarProjetoVincularSolicitacoesDocumentoApenasDIV">
<label for="adicionarProjetoVincularSolicitacoesDocumentoApenas">Vincular à solicitações</label>
<input type="text" class="form-control tagsinput typeahead" id="adicionarProjetoVincularSolicitacoesDocumentoApenas" name="adicionarProjetoVincularSolicitacoesDocumentoApenas" data-role="tagsinput">
</div>

Answer 1

You can have this working either by adding a displayKey or using map() to extract the values of the object in an array.

Using displayKey:

$('#adicionarProjetoVincularSolicitacoes').tagsinput({
   typeahead: ({
       source: solicitacoes,
       display: 'documento',
       displayKey: 'documento'
       afterSelect: function () {
           this.$element[0].value = '';
      },
      templates: {
          //...
      }
   })
})

Using map():

$('#adicionarProjetoVincularSolicitacoes').tagsinput({
   typeahead: ({
       source: solicitacoes.map((el) => el.documento),
       display: 'documento',
       afterSelect: function () {
           this.$element[0].value = '';
      },
      templates: {
            //...
      }
   })
})