将Bootstrap typeahead的“建议”插入选择器

Question

我正在使用bootstrp“typehead”自动完成小部件，我有以下场景：

想要的结果：

suggestion: Handlebars.comp( tr's.. ) - ＆gt;将出现在$（'＃suggestions'）选择器

中

JS

$('#typeahead-1').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        }, {
            name: 'PriceItems',
            displayKey: 'Name',
            limit: 10,
            minLenght: 1,
            templates: {
                empty: [
                  '<div>',
                    'unable to find any items',
                  '</div>'
                ],
                suggestion: Handlebars.compile("<tr><td>{{Name}}</td><td><span class='popupItem'>CS</span></td><td><span class='popupItem'>S</span></td><td><span class='popupItem'>M</span></td><td><span class='popupItem'>L</span></td><td><span class='popupItem'>XL</span></td></tr>")
            },
            source: function (query, process) {
                jQuery.ajax({
                    type: "POST",
                    url: "/Mapping/FetchData",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    async: true,
                    success: function (data) {
                        process(data);
                    },
                    failure: function (errMsg) {
                        alert(errMsg);
                    }
                });
            }
        });

HTML

<input type="text" class="form-control" placeholder="Type item name..." id="typeahead-1">
      <div>
           <table class='table table-striped dt-responsive dataTable'>
              <tbody id="suggestions"></tbody>
           </table>
     </div>