使用Bootstrap 3中的图像预先格式化格式

Question

目前的情况如下：

大概我希望它看起来像是什么样的，以行的形式显示，左边的图片然后是右边的名字，但没有滚动

typeahead也会破坏我的输入形式，它应该一直到搜索按钮（如果我禁用了typeahead）。关于如何解决这个问题的任何想法？

HTML：

<div class="col-md-10 col-md-offset-1">
      <div class="input-group typeahead">
        <input type="text" data-provide="typeahead" name="query" id="query" class="form-control input-lg" autocomplete="off" 
          spellcheck="false" placeholder="Type a hero">
          <span class="input-group-btn">
            <button class="btn btn-primary btn-lg">
              <span class="glyphicon glyphicon-search">
              </span> Search
            </button>
          </span>
      </div>
    </div>

JavaScript的：

var all_heroes = [{
    name: "Axe",
    picture: "http://cdn.dota2.com/apps/dota2/images/heroes/axe_lg.png"
}, {
    name: "Anti-Mage",
    picture: "http://cdn.dota2.com/apps/dota2/images/heroes/antimage_lg.png"
}, {
    name: "Storm Spirit",
    picture: "http://cdn.dota2.com/apps/dota2/images/heroes/storm_spirit_lg.png"
}];

//$("#query").typeahead({ source:heroes});


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