typeahead.js - 将预先输入的建议包装在表格中

Question

我正在尝试让我的预输入自动完成功能在表格中返回其结果。因为每个建议都是单独呈现的，所以没有地方包含 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>")
  }
});

返回:

<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>

需要它返回:

<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

我让这个工作，但不是“自动列宽”:

$(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>';
      }
    }
  });

});