Autocomplete with images and custom html code in Jquery UI?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this blog I will show you how to autocomplete with image and custom html code in jquery Ui. If in your website you need to set auto-complete user or full-name also with image. Now in generally we can use auto-complete also with name, email, message etc text but if we want to add image or our own html code as like as user html tag in autocomplete then we need to use “_renderItem” in jquery ui. Here we know how we will create because here 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>

Read Also : How to Open Link in New Tab on Click in javascript ?

Thanks for read this, I hope it will you. You can also follow us onĀ Facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →