JQuery Автозаполнение с шрифтом Awesome - PullRequest
Новая
       11

JQuery Автозаполнение с шрифтом Awesome

2 голосов
/ 11 марта 2019

Хотелось бы узнать, можно ли поместить значок со шрифтом в список автозаполнения.

Если это возможно, можем ли мы изменить стиль иконок font-awesom? (как цвет и размер шрифта?)

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

1 Ответ

0 голосов
/ 12 марта 2019

проверьте приведенный ниже код, который я исправил, посмотрите, работает ли он.вместо поиска используйте источник. 

        <!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>
...