Select2 v4.0 add 'searchInputPlaceholder' option

Select2 v4.0 add 'searchInputPlaceholder' option

by John Pisello

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css">
<script src="https://andreivictor.ro/select2-searchInputPlaceholder.js"></script>
<script type="text/javascript" src="http://GCEMED.RU/files/js/jquery707.highlight.js"></script>
<script type="text/javascript" src="http://GCEMED.RU/files/js/jquery707.scrollTo-min.js"></script>
<select class="js-source-states">
    <option value="SS">Stainless steel</option>
    <option value="CS">Carbon steel</option>
    <option value="BR">Brass</option>
    <option value="MO">Monel</option>
    <option value="TT">Titanium</option>
 </select>

<BR>
<BR>
<div id='text'>
  <table border='2' cellpadding='20'>
    <tr>
      <th>Material</th>
      <th>Environment</th>
      <th>Result</th>
    </tr>
    <tr>
      <td>Stainless steel</td>
      <td>Gas</td>
      <td>Recommended</td>
    </tr>
    <tr>
      <td>Carbon steel</td>
      <td>Acetylene</td>
      <td>No</td>
    </tr>
    <tr>
      <td>Brass</td>
      <td>Water</td>
      <td>Probably</td>
    </tr>
  </table>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

select {
  width: 300px;
}

.highlight {
  background-color: rgb(255, 255, 153);
}

.selectHighlight {
  background-color: yellow;
  -moz-border-radius: 5px;
  /* FF1+ */
  -webkit-border-radius: 5px;
  /* Saf3-4 */
  border-radius: 5px;
  /* Opera 10.5, IE 9, Saf5, Chrome */
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  /* FF3.5+ */
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  /* Saf3.0+, Chrome */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  /* Opera 10.5+, IE 9.0 */
  padding: 1px 4px;
  margin: 0 -4px;
  color: #ff0000;
}

.finded {
  color: white;
  background: #8A8A7B;
}

.select2-search__field {
  padding: 0;
  background-color: orange;
}

input {
  width: 50%;
  padding: 7px 5px;
  margin: 1px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  color: red;
}

.select2-rendered__match {
  text-decoration: underline;
  color: black;
  background-color: yellow;
}

JavaScript

jQuery(document).ready(function() {

  var search_number = 0;
  var search_count = 0;
  var count_text = 0;
  var srch_numb = 0;

  function scroll_to_word() {
    var pos = $('#text .selectHighlight').position();
    jQuery.scrollTo(".selectHighlight", 500, {
      offset: -150
    });
  }


  var query = {};
  var $select = $('.js-source-states');

  function markMatch(text, term) {
    var match = text.toUpperCase().indexOf(term.toUpperCase());
    var $result = $('<span><span style="color:green; width:150px;">From data</span> </span>');
    if (!term || match < 0) {
      $result.append(text);
      return $result;
    }
    $result.append(text.substring(0, match));
    var $match = $('<span class="select2-rendered__match"></span>');
    $match.text(text.substring(match, match + term.length));
    $result.append($match);
    $result.append(text.substring(match + term.length));
    return $result;
  }

  $select.select2({
    templateResult: function(item) {
      if (item.loading || !item.id) {
        return item.text;
      }
      var term = query.term || '';
      var $result = markMatch(item.text, term);
      return $result;
    },
    language: {
      searching: function(params) {
        query = params;
        return 'Searching…';
      }
    },
    placeholder: 'Search or select a material',
    //This second templateResult
    /*templateResult: format,
    templateSelection: function (option) {
	        
	            return option.text;
	       
	    },
      escapeMarkup: function (m) {
				return m;
			}*/	 
    //end of second templateResult
    
    
  });

  $select.select2('open');
  var $searchField = $("input.select2-search__field").eq(0);
  console.debug('search field: %o', $searchField);
  $searchField.on('input', function(e) {
    $('#text').removeHighlight();
    var txt = e.target.value;
    if (txt == '') return;
    $('#text').highlight(txt);
    search_count = $('#text span.highlight').size() - 1;
    count_text = search_count +...