Autocomplete With Images And Custom HTML Code Using Jquery UI?

Today I will show you on your website to set an autocomplete jquery example with an image. generally, you use autocomplete in jquery with name, email, message, etc. text but if you want to add images 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 an example of an HTML file :

<html>
   <head>
      <title>Autocomplete With Images And Custom HTML Code Using Jquery UI? - PHP Coding Stuff</title>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
   </head>
   <body>
      <h1>javascript autocomplete textbox from database - PHP Coding Stuff</h1>
      <div class="ui">  
         <label for="name">Name: </label>  
         <input id="name">  
      </div>
      <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://yourwebsitepath/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> 
      <body>
         <html>

I hope it can help you...

Image Php JQuery

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.