jquery自动完成字体真棒答案

【问题标题】：jquery autocomplete wih font awesomejquery自动完成字体真棒
【发布时间】：2019-03-12 21:28:24
【问题描述】：

我想知道是否可以在自动完成列表中放置一个很棒的字体图标。

如果可能的话，我们可以改变字体真棒图标样式吗？（比如颜色和字体大小？）

JQUERY

$(function () {
var currencies = [
    {value: '<i class=fas fa-cog></i>'+'Spring', desc: 'Techno'},
    {value: 'J2EE', desc: 'Techno'},
    {value: 'Delphi', desc: 'Techno'},
    {value: 'HTML/CSS', desc: 'Techno'},
    {value: 'PL/SQL', desc: 'Techno'},
    {value: 'PHP', desc: 'Techno'},
    {value: 'C#', desc: 'Techno'},
    {value: 'Javascript', desc: 'Techno'},
    {value: 'AngularJS', desc: 'Techno'},
    {value: 'Liferay ', desc: 'Techno'},
    {value: 'Shell', desc: 'Techno'},
    {value: '<i class=fas fa-mobile-alt></i>+Agranet', desc: 'Appli'},
    {value: 'Etoile', desc: 'Appli'},

];

$('#autocomplete').autocomplete({

    lookup: currencies,
    onSelect: function (suggestion) {
        var thehtml = suggestion.value;

        var html_tag_hidden = $($('.tag_competence_search')[0]).clone();
        html_tag_hidden.show();
        $(html_tag_hidden.children()[0]).html(thehtml);
        $('#nav-test').append(html_tag_hidden);
    }
  });
});

【问题讨论】：

是的，它可以做到这一点。您正在使用哪个版本的字体真棒。你能为你想做的事情做一个js小提琴吗？
@pawankumar 我使用的是 v5.7.2 版本。我会试着做一个小提琴:)
jsfiddle.net/Stellaria/csbdzr4x/4/#&togetherjs=vD0ytuxiBl 我的自动完成功能在 jsFiddle 上不起作用，但在我的页面上起作用......我认为它没有帮助

标签： jquery autocomplete font-awesome

【解决方案1】：

检查下面的代码，我已更正它，看看这是否有效。而不是查找使用源。

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css">
          <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script> -->
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <title>Document</title>
        </head>
        <body>

             <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="basic-addon1" style="border-right: none; background: white">
                           <i class="fas fa-search"></i>
                     </span>
                </div>
                <div class="tag_competence_search">ssdds</div>
                <input type="text" class="form-control" id="autocomplete" aria-label="Recipient's username" 
                aria-describedby="basic-addon2" style="padding-left: 5px; border-left: none">
              </div>


       <script>
            $(function() {

          var currencies = [{
              value: 'Spring',
              desc: 'Techno'
            },
            {
              value: 'J2EE',
              desc: 'Techno'
            },
            {
              value: 'Delphi',
              desc: 'Techno'
            },
            {
              value: 'HTML/CSS',
              desc: 'Techno'
            },
            {
              value: 'PL/SQL',
              desc: 'Techno'
            },
            {
              value: 'PHP',
              desc: 'Techno'
            },
            {
              value: 'C#',
              desc: 'Techno'
            },
            {
              value: 'Javascript',
              desc: 'Techno'
            },
            {
              value: 'AngularJS',
              desc: 'Techno'
            },
            {
              value: 'Liferay ',
              desc: 'Techno'
            },
            {
              value: 'Shell',
              desc: 'Techno'
            },
            {
              value: 'Agranet',
              desc: 'Appli'
            },
            {
              value: 'Etoile',
              desc: 'Appli'
            },

          ];


           $('#autocomplete').autocomplete({

    source: currencies,

    onSelect: function(suggestion) {
      var thehtml = suggestion.value;
        console.log(thehtml)
      var html_tag_hidden = $($('.tag_competence_search')[0]).clone();
      html_tag_hidden.show();
      $(html_tag_hidden.children()[0]).html(thehtml);
      $('#nav-test').append(html_tag_hidden);
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
        // console.log(item.label)

            return $('<li class="ui-menu-item-with-icon"></li>')
            .data("item.autocomplete", item)
            .append("<i class='fab fa-500px'></i>"+item.label)
            .appendTo(ul);
        };
});


       </script>

        </body>
        </html>

【讨论】：

这行不通。我不必正确表达我的问题。我的自动完成功能完美，我只想在选项列表中添加字体很棒的图标。
you mean when options come for selection you want to add font awesome icons before that ?示例：icon1 text1 icon2 text2
是的，当然。我想要这个，但我也想保持自动完成功能：D