Select2 v4.0 add 'searchInputPlaceholder' option

Select2 v4.0 add 'searchInputPlaceholder' option

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">Нержавеющая сталь</option>
    <option value="CS">Углеродистая сталь</option>
    <option value="BR">Латунь</option>
    <option value="MO">Монтель</option>
    <option value="TT">Титан</option>
 </select> 
  
<BR><BR>
<div id='text'>
<table border='2' cellpadding='20'>
 <tr><th>Материал</th><th>Среда</th><th>Совместимость</th></tr>
 <tr><td>Нержавеющая сталь</td><td>Бензиновый</td><td>Рекомендуется</td></tr>
 <tr><td>Углеродистая сталь</td><td>Бензин</td><td>Конечно</td></tr>
 <tr><td>Латунь</td><td>Вода</td><td>Отлично</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;
}

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 $select = $('.js-source-states');
  $select.select2({
  	placeholder: 'Search or select a material'
  });
  $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 + 1;
    search_number = 0;
    $('#text').selectHighlight(search_number);
    if ( search_count >= 0 ) scroll_to_word();
    $('#count').html('Find: <b>'+count_text+'</b>');
  });
  $select.select2('close');
});