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.

Possible duplicate of [HTML text input field with currency symbol](https://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol) — Mukyuu, Dec 18 '18 at 06:29
@Mukyuu Please read question, it's about image and not symbol. — Divyam Solanki, Dec 18 '18 at 06:49

Mukyuu · Answer 1 · 2018-12-18T07:49:52.787

Either by using:

<span><i class="fa fa-bitcoin blue"> </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.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>

Update:

To convert: FontAwesome Icons to Image

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

Background-size

Background-position

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 : ``. You will have to store selected element's image-src in `image` variable. — shhdharmen, Jan 21 '19 at 05:13

Add icon in typeahead input box

1 Answers1