在Bootstrap的Typeahead中添加標籤，值和圖片

Question

我正在玩Typeahead，我試圖找出是否有方法在搜索查詢中顯示圖片和標籤？就像我們試圖在推文上提及用戶時Twitter所做的一樣。

Answer 1

做一些研究和拉動幾乎所有我的頭髮後，我終於想通了如何將全名，圖片和用戶名添加到類似twitter的類型。

比方說，這是每一個對象爲源的結構如下，

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

然後，所有你需要做的就是寫一個很好的熒光筆，像這樣

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; 
      }, 

某事，這將很容易在Typeahead中添加圖片，全名和用戶名。

Answer 2

您可能會發現使用http://ivaynberg.github.com/select2/更容易/更好，而不是嘗試自定義默認垃圾Bootstrap！

如果搜索模板該網頁上，你會發現它 - 它看起來像這樣：

Answer 3

您可以嘗試使用以下自定義代碼來渲染包含JSON模式的圖像。

請按照fiddle link here進行實施和測試。

的預輸入的樣子：

$(".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

熒光筆不再工作。

使用模板，例如：

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} 
     } 
    } 
); 

來源：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(); 
    } 
}; 

來源：https://jsfiddle.net/geghamk/59eranrc/3/