twitter bootstrap - mdb - Bootstrap Typeahead no muestra pistas como se esperaba

typeahead css bootstrap 4

Question

Estoy usando Typeahead para mostrar sugerencias de una base de datos de artículos y una base de datos de tiendas. Cuando muestro consejos solo de elementos que se muestran bien, cuando solo muestro en tiendas también funciona bien, pero cuando trato de mostrar resultados mixtos, solo muestra el mensaje vacío predeterminado. Verifique la respuesta de AJAX y en los tres casos parece estar bien, así que tiene que estar en el lado del cliente.

El código JS es este:

var items = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''name''),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: ''/ajax/pesquisar/'',
    prepare: function(query, settings) {
      tokens = query.trim().split('' '');
      return ''/ajax/pesquisar/'' + tokens.join(''/'') + ''/'';
    }
  }
});

$(''input.typeahead'').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
{
    name: ''items'',
    display: ''name'',
    source: items,
    templates: {
      empty: [
        ''<div class="empty-message">'',
        ''Nenhum item relacionado'',
        ''</div>''
      ].join(''/n''),
      suggestion: Handlebars.compile(''<a href="{{url}}"><div class="suggestion"><div class="icone" style="background-image:url({{img}});"></div>{{name}}</div></a>'')
    }
});

La respuesta AJAX solo para elementos (que se muestra correctamente):

[
  {
    "id":"00007531",
    "url":"//higiene-e-limpeza//cabelos//condicionador-seda-cachos-comportados-e-definidos-350ml//",
    "name":"Condicionador Seda Cachos Comportados e Definidos 350mL",
    "img":"//img//produtos//7891037000315_I.png"
  },
  {
    "id":"00007641",
    "url":"//higiene-e-limpeza//cabelos//shampoo-seda-cachos-comportados-e-definidos-350ml//",
    "name":"Shampoo Seda Cachos Comportados e Definidos 350mL",
    "img":"//img//produtos//7891037000308_I.png"
  }
]

Solo para tiendas (también funciona bien):

[
  {
    "id":"00000001",
    "url":"//nidobox//montese//",
    "name":"Supermercado Nidobox - Montese",
    "img":"//img//supermercados//nidobox_i.jpg"
  },
  {
    "id":"00000002",
    "url":"//nidobox//damas//",
    "name":"Supermercado Nidobox - Damas",
    "img":"//img//supermercados//nidobox_i.jpg"
  },
  {
    "id":"00000003",
    "url":"//nidobox//aeroporto//",
    "name":"Supermercado Nidobox - Aeroporto",
    "img":"//img//supermercados//nidobox_i.jpg"
  }
]

Y al mezclar ambos resultados (mostrando el mensaje vacío predeterminado):

[
  {
    "id":"7531",
    "url":"//higiene-e-limpeza//cabelos//condicionador-seda-cachos-comportados-e-definidos-350ml//",
    "name":"Condicionador Seda Cachos Comportados e Definidos 350mL",
    "img":"//img//produtos//7891037000315_I.png"
  },
  {
    "id":"7641",
    "url":"//higiene-e-limpeza//cabelos//shampoo-seda-cachos-comportados-e-definidos-350ml//",
    "name":"Shampoo Seda Cachos Comportados e Definidos 350mL",
    "img":"//img//produtos//7891037000308_I.png"
  },
  {
    "id":"1",
    "url":"//nidobox//montese//",
    "name":"Supermercado Nidobox - Montese",
    "img":"//img//supermercados//nidobox_i.jpg"
  },
  {
    "id":"2",
    "url":"//nidobox//damas//",
    "name":"Supermercado Nidobox - Damas",
    "img":"//img//supermercados//nidobox_i.jpg"
  },
  {
    "id":"3",
    "url":"//nidobox//aeroporto//",
    "name":"Supermercado Nidobox - Aeroporto",
    "img":"//img//supermercados//nidobox_i.jpg"
  }
]

La cadena de búsqueda utilizada es "nido". . La única diferencia que veo entre ellos son los ceros finales en la ID. Convirtió esos ID a int y todavía tiene el mismo problema. ¿Alguien puede ver lo que me estoy perdiendo?

Gracias

EDITAR: Cortó la matriz de resultados en 4 pistas en el lado del servidor y ahora escribe encabezado en lugar de mostrar que el mensaje vacío muestra la primera pista y no la otra 3.

Answer 1

Encontrado el problema Es un error en typeahead.bundle.js (v 0.11.1). Está contando el número de sugerencias renderizadas antes de agregarlas, por lo que si el número de sugerencias es igual al límite, agregará una matriz vacía.

Para evitar esto, cambié las líneas 1723 y 1724 para que se vea así:

that._append(query, suggestions.slice(0, that.limit - rendered));
rendered += suggestions.length;

Ya informamos sobre el problema en github de typeahead.

Answer 2

@Luciano Garcia Bes - para completar su reseña, a continuación he publicado todos los cambios que son necesarios: tiene derecho a cambiar esas líneas, pero necesito quitarlas también. Así que finalmente se ve así (función completa):

            function async(suggestions) {
                suggestions = suggestions || [];
                if (!canceled && rendered < that.limit) {
                    that.cancel = $.noop;
                    that._append(query, suggestions.slice(0, that.limit));
                    rendered += suggestions.length;
                    that.async && that.trigger("asyncReceived", query);
                }
            }

más sobre este iisue: https://github.com/twitter/typeahead.js/issues/1415