Làm thế nào để thiết lập mẫu tùy chỉnh html trong bootstrap 3 typeahead DropDownList

Question

Tôi đã viết đoạn mã sau:

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

    }); 

Liệu ai đó có một gợi ý làm thế nào để thiết lập mẫu tùy chỉnh html cho các hạng mục thả xuống?

Cảm ơn bạn trước

Answer 1

Bạn có thể thử

{ 
    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

Với bootstrap-3-typeahead Tôi nghĩ rằng bạn không thể sử dụng mẫu tài sản. Trong trường hợp này, tốt hơn nên sử dụng highlighter. Ví dụ:

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

        } 
       } 
       ) 

Vì vậy, bạn có thể tạo mẫu html được hiển thị.

Nếu bạn muốn giữ lại các tính năng nổi bật, sử dụng regexp này

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

và

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

Answer 3

Hãy thử như thế này. Ngoài ra, bạn cần phải thêm Handlebars.js (cho mẫu) vào dự án của bạn.

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