JSFiddle - React, Tailwind, and code Playground

by Msk_Satheesh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js" integrity="sha512-Z/2pIbAzFuLlc7WIt/xifag7As7GuTqoBbLsVTgut69QynAIOclmweT6o7pkxVoGGfLcmPJKn/lnxyMNKBAKgg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" integrity="sha512-TsNN9S3X3jnaUdLd+JpyR5yVSBvW9M6ruKKqJl5XiBpuzzyIMcBavigTAHaH50MJudhv5XIkXMOwBL7TbhXThQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<input id="basics">

JavaScript

var options = {
    data: [
        {
            "text": "Home",
            "website_link": "http://easyautocomplete.com/",
            "icon": "http://lorempixel.com/100/50/transport/6"
        },
        {
            "text": "Github",
            "website_link": "https://github.com/pawelczak/EasyAutocomplete",
            "icon": "http://lorempixel.com/100/50/transport/6"
        }
    ],

    getValue: "text",

    template: {
        type: "custom",
        method: function(value, item) {
            return `<div>
              <img src="${item.icon}" width="50px" height="50px" />
              <a href=${item.website_link}> click me to go to ${value}</a>
           </div>`;
        }
    }
};

$("#basics").easyAutocomplete(options);