Jak ustawić niestandardowy szablon HTML w bootstrap 3 wpisywanie znaków z wyprzedzeniem dropdownlist

Question

I napisał następujący kod:

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

    }); 

Czy ktoś ma podpowiedź jak ustawić niestandardowy szablon HTML dla elementów rozwijanych?

góry dziękuję

Answer 1

Można spróbować

{ 
    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

Z bootstrap-3-wpisywanie znaków z wyprzedzeniem Myślę, że nie można użyć właściwości szablonu. W takim przypadku lepiej jest użyć zakreślacza z wyróżnieniem. Przykład:

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

        } 
       } 
       ) 

Możesz więc zbudować szablon HTML, który się wyświetli.

Jeśli chcesz zachować funkcję podświetlenia, należy użyć tego wyrażenia regularnego

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

i

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

Answer 3

Spróbuj tak. Ponadto do projektu musisz dodać plik Handlebars.js (dla szablonu).

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