在 typeahead 输入框中添加图标

Question

HTML 代码 -

<div class="input-group-btn">
   <div id="custom-templates">
       <input class="typeahead caret" id="cur1" name="cur1" onkeypress="getData()" class="form-control" style=" color: black;text-transform: uppercase;border: 0px;border-radius: 0px 5px 5px 0px;" aria-label="You Send" type="text" placeholder="BTC" value="BTC">
   </div>
</div>

Typeahead JS 代码 -

var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: 'http://localhost/api/currency.php',
});


$('#custom-templates .typeahead').typeahead(null, {
  name: 'best-pictures',
  display: 'value',
  source: bestPictures,
  templates: {
    empty: [
      '<div class="empty-message">',
        'unable to find any crypto currency',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<div><img src="{{image}}" class="svg">&nbsp;&nbsp;&nbsp;<strong style="text-transform: uppercase;">{{value}}</strong> – {{year}}</div>')
  }
});

输出 -

如输出所示，图像已添加到下拉列表中。有没有办法在输入框中也显示图标？就像单击 BTC（见截图）一样，Image/ICON 应该与名称一起添加到输入框中。

Answer 1

通过使用：

<span><i class="fa fa-bitcoin blue"> </i>输入前和输入后的CSS如下：

.blue{
color:blue;
}

或者：

<input id="icon" style="text-indent:20px;" type="text" placeholder="BTC" />

CSS 如下：

 background-image:url(https://i.stack.imgur.com/SEjw8.png); /*change with your image*/
 background-repeat: no-repeat; 
 background-position: 2px 2px; 
 background-size: 12px 12px; 

.blue{
color:blue;
}

#icon{
background-image:url(https://i.stack.imgur.com/SEjw8.png); /*change with your image*/
background-repeat: no-repeat; 
background-position: 2px 2px;
background-size: 12px 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="input-group-btn">
   <div id="custom-templates">
       <span><i class="fa fa-bitcoin blue">&nbsp;</i><input class="typeahead caret" id="cur1" name="cur1" onkeypress="getData()" class="form-control" style=" color: black;text-transform: uppercase;border: 0px;border-radius: 0px 5px 5px 0px;" aria-label="You Send" type="text" placeholder="BTC" value="BTC"></span><br>
       <input id="icon" class="typeahead caret" id="cur1" name="cur1" onkeypress="getData()" class="form-control" style="text-indent:20px; color: black;text-transform: uppercase;border: 0px;border-radius: 0px 5px 5px 0px;" aria-label="You Send" type="text" placeholder="BTC" value="BTC">
   </div>
</div>

更新：

要转换：FontAwesome Icons to Image

更多参考请查看here(1)或here(2) em>

Background-size

Background-position