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">
<optgroup label="Материал1">
<option value="SS">Нержавеющая сталь</option>
<option value="CS">Углеродистая сталь</option>
</optgroup>
<optgroup label="Материал2">
<option value="BR">Латунь</option>
<option value="BE">Brass</option>
<option value="MO">Monel</option>
<option value="TT">Titanium</option>
</optgroup>
<optgroup label="Материал3">
<option value="NY">Nylon</option>
<option value="PE">PCTFE</option>
<option value="P2">PEEK</option>
<option value="UH">UHMWPE</option>
<option value="NE">Neoprene</option>
<option value="CA">CARBON</option>
<option value="GR">Grafoil</option>
<option value="HA">Hastelloy C</option>
<option value="NR">Natural Rubber</option>
</optgroup>
</select>
<input class="sel5" type="text" value="поиск" onblur="if (this.value=='') this.value='поиск';" onfocus="if (this.value=='поиск') this.value='';" />
<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;
}
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});
}
$('.sel5').bind('keyup oncnange', function() {
$('#text').removeHighlight();
txt = $('.sel5').val();
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('Найдено: <b>'+count_text+'</b>');
});
$('#clear_button').click(function() {
$('#text').removeHighlight();
$('.sel5').val('поиск');
$('#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('Показано: <b>'+srch_numb+'</b> из '+$('#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('Показано: <b>'+srch_numb+'</b> из '+$('#text span.highlight').size());
}
});
});
$(document).ready(function() {
$(".js-source-states").select2({
searchInputPlaceholder: 'Search state...'
});
});