JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  
  
   <select id="my-select" style="width: 23em;">
    <option value=""></option>
    <option value="SS">Carbon steel</option>
    <option value="CS">Stainless steel</option>
     <option value="BR">Brass</option>
    <option value="MO">Monel</option>
    <option value="TT">Titanium other material</option>
    
  </select>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

CSS

.select2-results__message {
  font-style: italic;
  body.noTerm & {
    display: none;
  }
}
.select2-results__option {
  /* Remove select2's default item padding. */
  padding: 0;
  
  &[aria-selected="true"] {
    background-color: #b4d0fd;
    color: #112;
  }
  /* Add padding on rendered items that have content divs. See index.js::renderItem(). */
  &.select2-results__message,
  & > div {
    padding: 6px;
    /* Matched synonyms are in italics */
    & > i {
      display: block;
      font-size: .833334em;
      letter-spacing: .5pt;
      // opacity: 0.6;
    }
    /* matched query text is in <mark> elements. */
    & mark {
      background-color: transparent;
      // color: inherit;
      // background-color: #fff6;
      color: red;
      font-weight: bold;
      // border-radius: 3px;
    }
  }
  &--highlighted > div mark {
    color: yellow;
  }
} // .select2-results__option

html, body {
  height: 100%;
  font-family: sans-serif;
}
.info li {
  margin-bottom: 1em;
}

.select2-results__message {
  font-style: italic;
}

body.noTerm .select2-results__message {
  display: none;
}

.select2-results__option {
  /* Remove select2's default item padding. */
  padding: 0;
  /* Add padding on rendered items that have content divs. See index.js::renderItem(). */
}

.select2-results__option[aria-selected="true"] {
  background-color: #b4d0fd;
  color: #112;
}

.select2-results__option.select2-results__message,
.select2-results__option>div {
  padding: 6px;
  /* Matched synonyms are in italics */
  /* matched query text is in <mark> elements. */
}

.select2-results__option.select2-results__message>i,
.select2-results__option>div>i {
  display: block;
  font-size: .833334em;
  letter-spacing: .5pt;
}

.select2-results__option.select2-results__message mark,
.select2-results__option>div mark {
  background-color: transparent;
  color: red;
  font-weight: bold;
}

.select2-results__option--highlighted>div mark {
  color: yellow;
}

html,
body {
  height: 100%;
 ...

JavaScript

$(document).ready(() => {
  
  let _selectIsOpen = false;
  const MATCH_AT_START_OF_WORD = false;

  
  const numItems = 5; 
  const data = getLipsum(numItems).map((item, index) => {
    
    const abbr = item.split(" ").reduce((acc, word) => {
      return acc + word.substring(0, 1);
    }, "");
    
    const datum = {
      id: index + 1,
      text: item,
      extras: [abbr]
    };
    
    return datum;
  });
  
  const matchTextAndExtras = (params, item) => {
  
    let query = $.trim(params.term);
  
    if (!query || query.length < 2) {
      $("body").addClass("noTerm");
      // return null;
      return item;
    } else {
      $("body").removeClass("noTerm");
    }
  
    if (!$.trim(item.text)) {
      return null;
    }
    query = query.replace(/([^0-9A-Z -])/gi, "\\$1");
    if (MATCH_AT_START_OF_WORD) {
      query = "\\b" + query;
    }
  
    const queryRe = new RegExp(query, "ig");
    if (item.text.search(queryRe) > -1) {
      const modifiedItem = $.extend({}, item, true);
  
      modifiedItem.text = item.text.replace(queryRe, match => {
        return "<mark>" + match + "</mark>";
      });
      return modifiedItem;
    } 
    else if (item.extras) {
      const matchedExtra = item.extras.find(text => {
        return text.search(queryRe) > -1;
      });
      if (matchedExtra) {
        const modifiedItem = $.extend({}, item, true);
        modifiedItem.text +=
          " <i>[" +
          matchedExtra.replace(queryRe, match => {
            return "<mark>" + match + "</mark>";
          }) +
          "]</i>";
        return modifiedItem;
      }
    }
    return null;
  };

  const renderItem = item => {
    console.log("renderItem(): item: %o", item);
    if (item.text !== "") {
      return $("<div>").html(item.text);
    } else {
      return "";
    }
  };

  
  const $mySelect = $('#my-select');
  $mySelect.select2({
    data: data,
    matcher: matchTextAndExtras,
   
    placeholder: {
      id: "",
      text: "Начинайте...