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></option>
  <optgroup label="Material1">
    <option value="SS">Stainless steel</option>
    <option value="CS">Carbon steel</option>
  </optgroup>
  <optgroup label="Material2">
    <option value="BR">Brass</option>
    <option value="MO">Monel</option>
    <option value="TT">Titanium</option>
  </optgroup>
  </select> 
  
<BR><BR>
<div id='text'>
<table border='2' cellpadding='20'>
 <tr><th>Material</th><th>Environment</th><th>Recomended</th></tr>
 <tr><td>Stainless steel</td><td>Gas</td><td>Recommends</td></tr>
 <tr><td>Carbon steel</td><td>Gasoline</td><td>No</td></tr>
 <tr><td>Brass</td><td>Water</td><td>Recommends</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});
	}

$('#clear_button').click(function() {
		$('#text').removeHighlight();
		$('.sel5').val('search');
		$('#count').html('');
		jQuery.scrollTo(0, 500, {queue:true});
	});
            
	$('#prev_search').click(function() {
		if (search_number == 0) return;
		$('#text .selectHighlight').removeClass('selectHighlight');
		search_number--;
		srch_numb = search_number + 1;
		$('#text').selectHighlight(search_number);
		if ( search_count >= 0 ) { 
			scroll_to_word();
			$('#count').html('Results: <b>'+srch_numb+'</b> from '+$('#text span.highlight').size());
		}
	});
            
	$('#next_search').click(function() {
		if (search_number == search_count) return;
		$('#text .selectHighlight').removeClass('selectHighlight');
		search_number++;
		srch_numb = search_number + 1;
		$('#text').selectHighlight(search_number);
		if ( search_count >= 0 ) { 
			scroll_to_word();
			$('#count').html('Results: <b>'+srch_numb+'</b> from '+$('#text span.highlight').size());
		}
	});

	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');
});