Insert sentences in a table

Question

I am trying to get autocomplete autorun type to return results inside a table. Since each proposal is created individually, there is nowhere to include a table tag without receiving a visualization for each proposal.

I tried using the header / footer template by placing the open table tag in the header and the close table tag in the footer, but the sentences do not appear in the table.

$('#orgSelector').typeahead(null, { name: 'orgSelector', source: orgSelector, display: 'name', limit: 20, templates:{ empty: "<div>No matches</div>", header: Handlebars.compile("<table class='table injected-table'><tbody>"), suggestion: function (d){ return '<tr><td>' + d.name + '</tr></td>' }, footer: Handlebars.compile("</tbody></table>") } }); 

Return:

 <div class="tt-dataset tt-dataset-orgSelector"> <table class="table injected-table"> <tbody></tbody> </table> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Hardware </td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Pharmacy</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Guns</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Marine</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Firearms</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Automotive</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Outfitters</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Sales</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Enterprises</td> </tr><tr class="tt-suggestion tt-selectable"><td>D &amp; D Farms</td></tr> </div> </div> 

You need to return:

 <div class="tt-dataset tt-dataset-orgSelector"> <table class="table injected-table"> <tbody> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Hardware </td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Pharmacy</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Guns</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Marine</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Firearms</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Automotive</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Outfitters</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Sales</td></tr> <tr class="tt-suggestion tt-selectable"><td>D &amp; D Enterprises</td> </tr><tr class="tt-suggestion tt-selectable"><td>D &amp; D Farms</td></tr> </tbody> </table> </div> 

Answer 1

I got this to work, but not with "automatic column width":

 $(document).ready(function () { var Policies = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('ReferenceNo','QuoteName'), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: '/AACOAgentPortal/LightningNav/Policies/%QUERY', wildcard: '%QUERY' } }); // Initializing the typeahead $('#Policies').typeahead(null, { name: 'Policies', display: 'ReferenceNo', source: Policies, templates: { empty: [ '<div class="empty-message">', 'Unable to find any Policies that match the current query', '</div>' ].join('\n'), header: function(data) { return '<table><tr>' + '<th nowrap style="border-left:1px solid #ccc;padding:0px 3px;min-width:250px;">ReferenceNo</th>'+'<th nowrap style="border-left:1px solid #ccc;padding:0px 3px;min-width:250px;">QuoteName</th>' + '</tr></table>'; }, suggestion: function(data) { return '<table><tr>' + '<td nowrap style="border-left:1px solid #ccc;padding:0px 3px;min-width:250px;">' + data.ReferenceNo + '</td>'+'<td nowrap style="border-left:1px solid #ccc;padding:0px 3px;min-width:250px;">' + data.QuoteName + '</td>' + '</tr></table>'; } } }); }); 

Answer 2

Instead of struggling with something, typeahead does not imply that it was simpler and perhaps more elegant to emulate a table using the css display: table; property display: table; .

There is a good related article here .

Answer 3

This will fix the width issue:

  header: function () { return '<table class = "tt-suggestion tt-selectablett-suggestion tt-selectable"><tr>' + '<th nowrap style="border-left:1px solid #ccc;padding:0px 3px;min-width:250px;">ReferenceNo</th>' + '<th nowrap style="border-left:1px solid #ccc;padding:0px 3px;min-width:250px;">QuoteName</th>' + '</tr></table>'; },