Autocomplete with Images and Custom HTML Code in Jquery UI?

In your website you require to set auto-complete user full-name with image. generally you use auto-complete with name, email, message etc text but if you want to add image or your own html code like user html tag in autocomplete then you have to use "_renderItem" in jquery ui. how you will create i give you example of html file :

Index.html

<title>How To Use Autocomplete</title>  
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>  
     <script>  
     $(function() {  
       $( "#name" ).autocomplete({  
         source: function( request, response ) {  
          $.ajax({  
            url: "http://yourhostpath/getdata",  
            dataType: "json",  
            data: {  
                term: request.term  
            },  
            success: function( data ) {  
                response( $.map( data.results, function( result ) {  
                    return {  
                        label: result.id + " - " + result.label,  
                        value: result.id,  
                        imgsrc: result.image  
                    }  
                }));  
            }  
        });  
         }  
       }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {  
           return $( "<li></li>" )  
               .data( "item.autocomplete", item )  
               .append( "<a>" + "<img style='width:25px;height:25px' src='" + item.imgsrc + "' /> " + item.label+ "</a>" )  
               .appendTo( ul );  
       };  
     });  
     </script>  
      
      
    <div class="ui">  
      <label for="name">Name: </label>  
      <input id="name">  
    </div>

Try this......