Bootstrap'ın Typeahead öğesinde Etiket, değer ve resim ekleme

Question

Typeahead ile oynuyorum ve arama sorgusunda ayrıca Resimler ve Etiketler göstermenin bir yolu olup olmadığını anlamaya çalışıyorum. Twitter'da, Tweet'lerde kullanıcılardan bahsetmeye çalıştığımıza benzer bir şey.

Answer 1

biraz araştırma yapıyor ve neredeyse tüm saçımı çekerek sonra nihayet yolunu bulmuştur Fullname, resim ve kullanıcı adlarını twitter gibi bir typeahead'e eklemek.

Sonra yapmanız gereken tek şey bu

highlighter: function(item) { 
       var parts = item.split('#'), 
       html = '<div class="typeahead">'; 
       html += '<div class="media"><a class="pull-left" href="#"><img src='+parts[2]+' /></a>' 
       html += '<div class="media-body">'; 
       html += '<p class="media-heading">'+parts[3]+' (@'+parts[1]+')'+'</p>'; 
       html += '</div>'; 
       html += '</div>'; 
       return html; 
      }, 

gibi güzel bir Vurgulayıcı, bir şeyler yazmak olduğunu, bu kaynak için her nesnenin aşağıdaki yapı olduğunu söylemek

{{ friend.id }}#{{ friend.username }}#{{ friend.imgurl }}#{{ friend.fullname }} 

Lets Bu kolayca olacak Typeahead'deki Resmi, Tam adı ve Kullanıcı Adını ekleyin.

Answer 2

Varsayılan çöp Bootstrap birimini özelleştirmeye çalışmak yerine http://ivaynberg.github.com/select2/'u kullanmayı daha kolay/daha iyi bulmanız olasıdır!

o sayfada şablon ararsanız, daha bulacaksınız - bu şuna benzer:

Answer 3

JSON şeması içeren görüntüleri oluşturmak için aşağıdaki özelleştirilmiş kodu kullanmaya çalışabilirsiniz.

Uygulama ve test için lütfen fiddle link here numaralı telefonu takip edin.

$(".typeahead").typeahead({ 
    source: function (query, process) { 

     //here we pass the query (search) and process callback arguments to the throttled function 
     throttledRequest(query, process); 

    }, 
    highlighter: function (item) { 
     var test = testObjs[item]; 

     return '<div class="test">' + '<img src="' + test.photo + '" />' + '<br/><strong>' + test.name + '</strong>' + '</div>'; 
    }, 
    updater: function (selectedName) { 

     //note that the "selectedName" has nothing to do with the markup provided 
     //by the highlighter function. It corresponds to the array of names 
     //that we sent from the source function. 

     //save the id value into the hidden field 
     $("#testId").val(testObjs[selectedName].id); 

     //return the string you want to go into the textbox (the name) 
     return selectedName; 
    } 
}); 

Answer 4

vurgulayıcı artık çalışmıyor: gibi

typeahead görünüyor.

Kullanım şablonları, örnek:

var my_friends = [ 
    {name: "John", picture: "http://..."} 
    ,{name: "Mel", picture: "http://..."} 
]; 

var friends = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: my_friends 
}); 
friends.initialize(); 
$('#friend_name').typeahead(
    { 
     hint: true, 
     highlight: true, 
     minLength: 1, 
    }, 
    { 
     name: 'friends', 
     displayKey: 'name', 
     source: friends.ttAdapter(), 
     templates: { 
      empty: 'not found', //optional 
      suggestion: function(el){return '<img src="'+el.picture+'" />'+el.name} 
     } 
    } 
); 

Kaynak: https://gist.github.com/jharding/9458780#file-custom-templates-js

Answer 5

typeahead.initialize(); 
var typeahead = { 

    typeaheadInit: function() { 
     var jsonData = [{ 
      'id': 1, 
      'name': 'Parajanov Museum', 
      'image': 'img/1.png' 
     }, { 
      'id': 2, 
      'name': 'Parajanov’s Movie', 
      'image': 'img/2.png' 
     }, { 
      'id': 3, 
      'name': 'S Parajanov’s about his series of Giocondas', 
      'image': 'img/3.png' 
     }, { 
      'id': 4, 
      'name': 'S Parajanov’s about the colore of pomegranate', 
      'image': 'img/4.png' 
     }, { 
      'id': 5, 
      'name': 'George Michael', 
      'image': 'img/5.png' 
     }]; 

     var productNames = []; 
     $.each(jsonData, function(index, product) { 
      productNames.push(product.name + "#" + product.image + "#" + product.id); 
     }); 
     $('#typeahead').typeahead({ 
      source: productNames, 
      highlighter: function(item) { 
       var parts = item.split('#'), 
        html = '<div><div class="typeahead-inner" id="' + parts[2] + '">'; 
       html += '<div class="item-img" style="background-image: url(' + parts[1] + ')"></div>'; 
       html += '<div class="item-body">'; 
       html += '<p class="item-heading">' + parts[0] + '</p>'; 
       html += '</div>'; 
       html += '</div></div>'; 

       var query = this.query; 
       var reEscQuery = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
       var reQuery = new RegExp('(' + reEscQuery + ')', "gi"); 
       var jElem = $(html); 
       var textNodes = $(jElem.find('*')).add(jElem).contents().filter(function() { 
        return this.nodeType === 3; 
       }); 
       textNodes.replaceWith(function() { 
        return $(this).text().replace(reQuery, '<strong>$1</strong>'); 
       }); 

       return jElem.html(); 
      }, 
      updater: function(selectedName) { 
       var name = selectedName.split('#')[0]; 
       return name; 
      } 
     }); 
    }, 

    initialize: function() { 
     var _this = this; 
     _this.typeaheadInit(); 
    } 
}; 

Kaynak: https://jsfiddle.net/geghamk/59eranrc/3/