jQuery UI Autocomplete - images scrolling

by mauricetwomey

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
      </div>
    </div>
  </div>
</div>

CSS

.ui-autocomplete {
    max-height: 155px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.search-result {


}

.search-result img {
  width: 70px;
  padding: 4px 10px 4px 6px;
}

.search-result span {
  font-size: 0.875rem;
}

JavaScript

$( function() {
    var availableTags = [
            {
        value: "jquery",
        label: "jQuery",
        img: "https://jqueryui.com/resources/demos/autocomplete/images/jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        img: "https://jqueryui.com/resources/demos/autocomplete/images/jqueryui_32x32.png"
      },
      {
        value: "jazzquery-ui",
        label: "jazzQuery UI",
        img: "https://jqueryui.com/resources/demos/autocomplete/images/jqueryui_32x32.png"
      },
      {
        value: "jacket-ui",
        label: "jacket UI",
        img: "https://jqueryui.com/resources/demos/autocomplete/images/jqueryui_32x32.png"
      },
      {
        value: "jackel-ui",
        label: "jackel UI",
        img: "https://jqueryui.com/resources/demos/autocomplete/images/jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        img: "https://jqueryui.com/resources/demos/autocomplete/images/sizzlejs_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        img: "https://jqueryui.com/resources/demos/autocomplete/images/sizzlejs_32x32.png"
      }
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    }).autocomplete("instance")._renderItem = function (ul, item) {
        var newText = String(item.label).replace(new RegExp(this.term, "gi"),"<span class='fw-bold'>$&</span>");
        return $("<li>")
        .append("<div class='search-result'><img src='" + item.img + "'/> <span>" + newText + "</span></div>")
        .appendTo(ul);
        };
        
 });