Add icon in typeahead input box

Question

HTML Code -

<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 Code -

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

Output -

As shown in the output, the image is added in the dropdown. Is there any way to display the icon as well, in the input box? Like when one clicks on BTC (see screenshot) the Image/ICON should be added in the inputbox along with the name.

Accentual

Possible duplicate of HTML text input field with currency symbol – Salpingectomy

@Salpingectomy Please read question, it's about image and not symbol. – Accentual

Answer 1

Either by using:

<span><i class="fa fa-bitcoin blue">&nbsp;</i>before input and after input with CSS as follow:

.blue{
color:blue;
}

Or:

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

with the CSS as follow:

 background-image:url(https://i.sstatic.net/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.sstatic.net/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>

Update:

To convert: FontAwesome Icons to Image

For more reference check here(1) or here(2)

Background-size

Background-position

Salpingectomy

To update the icon dynamically, I would suggest you take out background-image: url(...) in HTML itself. So, remove it only that line from css and put it in HTML like this : <input class="typeahead caret" ... style="background-image: {{image}}" ...>. You will have to store selected element's image-src in image variable. – Charlottetown