Добавить значок в поле ввода - PullRequest
Новая
       24

Добавить значок в поле ввода

0 голосов
/ 18 декабря 2018

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>

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

Вывод -

enter image description here

Как показано в выводе, изображение добавляется в раскрывающемся списке.Есть ли способ также отобразить значок в поле ввода?Например, когда вы нажимаете на BTC (см. Скриншот), в поле ввода необходимо добавить изображение / значок вместе с именем.

1 Ответ

0 голосов
/ 18 декабря 2018

Либо с помощью:

<span><i class="fa fa-bitcoin blue">&nbsp;</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 в изображение

Для получения дополнительной информации проверьте здесь (1) или здесь (2)

Размер фона

Положение фона

...