Autocomplete Search with Image and Custom HTML in jQuery

249 views 6 months ago jQuery

Today I will show you on your website to set an autocomplete jquery example with an image. generally, you utilize autocomplete in jquery with designation, email, message, etc. text but if you optate to integrate images or your own HTML code like utilizer HTML tag in autocomplete then you have to utilize "_renderItem" in jquery UI. how you will engender I give you an example of an HTML file :

<html>
    <head>
        <title>Autocomplete With Images -HackTheStuff</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    </head>
    <body>
        <h1>Autocomplete With Images -HackTheStuff</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 you like this.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]