Introduction

Have you ever wondered how to create an autocomplete feature with images and custom HTML code using Jquery UI? Well, you’re in luck! In this blog article, we will explore the process of implementing autocomplete with images and custom HTML code in Jquery UI. Get ready to take your autocomplete game to the next level!

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Autocomplete with Images</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    .custom-autocomplete-item {
      display: flex;
      align-items: center;
      padding: 5px;
    }

    .custom-autocomplete-item img {
      border-radius: 50%;
      margin-right: 10px;
    }
  </style>
</head>
<body>

  <label for="autocomplete">Search:</label>
  <input type="text" id="autocomplete">

  <script>
    $(document).ready(function() {
  // Sample data for autocomplete
  const data = [
    { label: 'Roshan', value: 'Roshan jha', image: 'https://placekitten.com/50/50' },
    { label: 'Amit', value: 'Amit Thakur', image: 'https://placekitten.com/51/51' },
    { label: 'Avi', value: 'Abhishek', image: 'https://placekitten.com/52/52' },
    // Add more data as needed
  ];

  // Autocomplete initialization
  $('#autocomplete').autocomplete({
    source: data,
    minLength: 0,
    select: function(event, ui) {
      // Handle the selected item (ui.item) here
      console.log(ui.item);
    },
    focus: function(event, ui) {
      // Prevent input value from being updated when focusing on an item
      event.preventDefault();
    }
  }).autocomplete('instance')._renderItem = function(ul, item) {
    // Custom rendering for each item in the dropdown
    return $('<li>')
      .append(`<div class="custom-autocomplete-item"><img src="${item.image}" alt="${item.label}" width="50" height="50">${item.label}</div>`)
      .appendTo(ul);
  };
});

  </script>
</body>
</html>

View:-

Output:-

Image :-1

Image:-2

Image :-3

Hopefully, It will help you…!!!