Autocomplete UI bring images

Asked

Viewed 208 times

1

Colleagues.

I am using the jquery UI autocomplete which is working correctly, but I would like the results, also bring this code:

<i class="fa fa-user" aria-hidden="true"></i>

When I put it directly in PHP, it brings it as text, I believe I have to do it in Jquery. How would I do it? The code I’m using is:

<script>
  $( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#txtUsuarios" ).autocomplete({
      source: function( request, response ) {
        $.ajax( {
          url: "buscar-usuarios.php",
          dataType: "json",
          data: {
            term: request.term
          },
          success: function( data ) {
                      response( data );
            //response( data );

          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    } );
  } );
  </script>
jquery

1 answer

1

There is a method called _renderItem

It is a bit complex, and is used with images and not icon fonts, but I believe you would like to use it:

(function($){
  
  var $project = $('#project');

  var projects = [
    {
      value: "jquery",
      label: "jQuery",
      desc: "the write less, do more, JavaScript library",
      icon: "jquery_32x32.png"
    },
    {
      value: "jquery-ui",
      label: "jQuery UI",
      desc: "the official user interface library for jQuery",
      icon: "jqueryui_32x32.png"
    },
    {
      value: "sizzlejs",
      label: "Sizzle JS",
      desc: "a pure-JavaScript CSS selector engine",
      icon: "sizzlejs_32x32.png"
    }
  ];
  
  $project.autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
      $project.val( ui.item.label );
      return false;
    }
  });
  
  $project.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
    
    var $li = $('<li>'),
        $img = $('<img>');


    $img.attr({
      src: 'https://jqueryui.com/resources/demos/autocomplete/images/' + item.icon,
      alt: item.label
    });

    $li.attr('data-value', item.label);
    $li.append('<a href="#">');
    $li.find('a').append($img).append(item.label);    

    return $li.appendTo(ul);
  };
  

})(jQuery);
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="project-label">Select a project (type "j" for a start):</div>
  <input id="project">
</body>
</html>

This example is not by me, but @Billcriswell is a member of Stackoverflow

Source: Stackoverflow in English

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.