jquery autocomplete with images and remote json

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.symbol_image+"' width='50px' /> "
        t += item.label.replace(regEx, replaceMask);
        //t += " <span style='font-size:50%;'>" + item.age + " years old </span>";
        t += " <span style='color:grey;'> |" + item.company_full_name + '|'  + item.exchange + " </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://financialmodellingprep.com/api/v3/symbol/search/autocomplete?query=A&limit=100",
            //url:"https://api.stackexchange.com/2.2/search/advanced?order=desc&sort=activity&user=john&site=stackoverflow",
          dataType: "json",
          data: {
            //q: request.term
              //filter: request.term,
              //pagesize: 5
          },
          success: function( data ) {
          console.log(data  )
            //response( data );
              response($.map(data, function(el, index) {
                        return {                            
                            value: el.symbol,
                            symbol_image: 'https://financialmodellingprep.com/images-New-jpg/'+ el.symbol.toUpperCase()+'.jpg',
                            company_full_name: el.company_full_name,
                            exchange: el.exchange
                        };
                    }));
          },
          error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
           ...