JSFiddle - React, Tailwind, and code Playground

by Financial Modeling Prep

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input id="search-query" type="text" />
<div id="result"></div>
<div id="result2"></div>

CSS

.ui-autocomplete-loading {
    background: white url("http://generator.barcoding.com/images/loading16.gif") right center no-repeat;
  }

.ui-autocomplete {
    max-height: 500px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    /*padding-right: 20px;*/
}

JavaScript

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    if (item.value === '')
        t = "None found";
    else
    {    
        var searchMask = this.term;
        var regEx = new RegExp(searchMask, "ig");
        var replaceMask = "<span style='font-weight:bold;color:black;'>" + $.trim(this.term) +"</span>";
        t = "<img src='"+item.profile_image+"' width='50px' /> "
        t += item.label.replace(regEx, replaceMask);
        //t += " <span style='font-size:50%;'>" + item.age + " years old </span>";
        t += " <span style='color:red;'>" + item.age + "€ </span>";
    }
    
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append(t)
        .appendTo(ul);
};

$('#search-query').autocomplete({
    source: function( request, response ) {
        $.ajax({
          //url: "http://gd.geobytes.com/AutoCompleteCity",
            url: "https://api.stackexchange.com/2.2/users?order=desc&sort=reputation&site=stackoverflow",
            //url:"https://api.stackexchange.com/2.2/search/advanced?order=desc&sort=activity&user=john&site=stackoverflow",
          dataType: "jsonp",
          data: {
            //q: request.term
              //filter: request.term,
              //pagesize: 5
          },
          success: function( data ) {
            //response( data );
              response($.map(data.items, function(el, index) {
                        return {                            
                            value: el.display_name,
                            profile_image: el.profile_image,
                            age: el.age,
                            location: el.location
                        };
                    }));
          }
        });
      },
    select: function( event, ui ) {
          $("#result").html("entered="+this.value + "<br/> selected text="+ui.item.label + "<br/>selected value=" + ui.item.value);             
        submitSearch(this.id,ui.item.value);          
      },       ...