Question

我正在尝试使用typeahead自动完成功能将结果返回到表格中。因为每个建议都是单独呈现的，所以没有任何地方可以包含表标记，而不会为每个建议呈现。

我尝试使用页眉/页脚模板，在页眉中放置一个打开的表格标签，在页脚中放置一个close table标签，但建议不会呈现在表格中。

<button id="button" onclick="start()">start</button>
<button onclick="stop()">stop</button>
<div id="try1"></div>
<div id="avg1"></div>

返回：

$('#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>

Answer 1

我让这个工作，但不是＆＃34;自动列宽＆＃34;：

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

使用css display: table;属性来模拟表格并不意味着更轻松也许更优雅，而不是为了做某事而打字。

有一篇关于这个主题的好文章here.

Answer 3

这会解决宽度问题：

header: function() {
    return (
        '<table class="tt-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>'
    );
},

在表格中包装预先建议

3 个答案: