时间戳

首页 > 解决方案 > Twitter typeahead.js - 使用对象数组

javascript - Twitter typeahead.js - 使用对象数组

问题描述

我正在尝试为表单实现 tagsinput + typeahead 字段，其中源是存储在 javascript 绑定中的对象数组。我想在表单中存储的值是 id，但我想通过对象的另一个属性为用户显示自定义 HTML 复合，就像这样：http: //twitter.github.io/typeahead.js/

当我使用一个简单的数组时，我成功地实现了这个 tagsinput + typeahead 字段输入，但它不适用于对象数组。

这是对象数组和字符串数组的示例。尝试遵循这些示例：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>

标签： javascriptjquerytypeahead.jsbootstrap-tags-input

解决方案

您可以通过添加 adisplayKey或使用map()来提取数组中对象的值来实现此目的。

使用displayKey：

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

使用map()：

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

推荐阅读