如何設置自定義HTML模板自舉3預輸入下拉列表

Question

我已經寫了下面的代碼：

 $('#pretraga').typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 2 

     }, 
    { 
     name: 'kategorije', 
     displayKey: 'value', 
     // `ttAdapter` wraps the suggestion engine in an adapter that 
     // is compatible with the typeahead jQuery plugin 
     source: kategorije.ttAdapter() 

    }); 

是否有人有一個提示如何設置下拉列表項的自定義HTML模板？

預先感謝您

Answer 1

你可以嘗試

{ 
    name: 'kategorije', 
    displayKey: 'value', 
    // `ttAdapter` wraps the suggestion engine in an adapter that 
    // is compatible with the typeahead jQuery plugin 
    source: kategorije.ttAdapter(), 
    template: /* html template here, {{name}} to use "data".name*/ 

}）

Answer 2

自舉-3預輸入我認爲你不能使用模板屬性。在這種情況下最好使用熒光筆。例如：

$('#employees').typeahead({ 
        highlighter: function (item) { 
         var parts = item.split('#'), 
          html = '<div class="typeahead">'; 
         html += '<div class="pull-left margin-small">'; 
         html += '<div class="text-left"><strong>' + parts[0] + '</strong></div>'; 
         html += '<div class="text-left">' + parts[1] + '</div>'; 
         html += '</div>'; 
         html += '<div class="clearfix"></div>'; 
         html += '</div>'; 
         return html; 
        }, 
        source: function (query, process) { 

         var employees = []; 

         return $.post('employee/search', { query: '%' + query + '%' }, function (data) { 

          // Loop through and push to the array 
          $.each(data, function (i, e) { 
           employees.push(e.name + "#" + e.number); 
          }); 


          // Process the details 
          process(employees); 
         }); 

        } 
       } 
       ) 

因此，您可以構建顯示的html模板。

如果你想保留的亮點功能，使用這個正則表達式

var name = parts[1].replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { 
          return '<strong>' + match + '</strong>' 
         }); 

和

     html += '<div class="text-left">' + name + '</div>'; 

Answer 3

嘗試這樣的。此外，您需要將Handlebars.js（模板）添加到您的項目中。

$('#pretraga').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 2 
}, { 
    name: 'kategorije', 
    displayKey: 'value', 
    source: kategorije.ttAdapter(), 
    templates: { 
     empty: [ 
      '<div class="empty-message">', 
      '-', 
      '</div>' 
     ].join('\n'), 
     suggestion: Handlebars.compile('<div class="row col-sm-12 col-lg-12 "><a>' + 
      '<div><div class="pull-left row col-sm-12 col-lg-2">' + 
      '<span>' + 
      '<img src="{{picture.data.url}}">' + 
      '</span></div>' + 
      '<div class="col-sm-12 col-lg-10"><span>{{name}} - ({{category}}) - <small style="color:#777;">({{id}})</small>' + 
      '</br><small style="color:#777;">({{location.street}} , {{location.city}} , {{location.country}})</small></span>' + 
      '</div></div>' + 
      '<div class="pull-right">' + 
      '<span class="id"><b>{{likes}}</b></span><span> <strong>Likes</strong></span>' + 
      '</div>' + 
      '</a></div>') 
    } 
});