Огромна благодарность!!!
Метод супер. Костыли отвинтил. Красава.
Понял закономерность потери строк, которые соответствуют условию поиска. И сделал фикс (может костыль, но работает).
ПРОШУ объясните почему вылазит глюк и как правильно фиксить?
Закономерность такова: если два раза подряд попадаются option с текстом удовлетворяющим условие, то каждый второй найденный выпадает. Костыль - вставит проверку пустой строки перед нужной проверкой.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.content {
padding: 3px;
margin-bottom: 5px;
}
.MYlistbox
{
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.inputSearch{
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var inpMY = document.getElementById("search");
var sMY = document.getElementById("carsSelect");
var grMY = sMY.querySelectorAll("optgroup");
var oMY = [].map.call(grMY, function(el) {
return [].slice.call(el.querySelectorAll("option"))
});
function FiltrGoAnother() {
var regMY = new RegExp(inpMY.value, "ig");
oMY.forEach(function(node, i) {
node.forEach(function(op, a) {
regMY.test("");//КОСТЫЛЬ
regMY.test(op.text) ? grMY[i].appendChild(op) : op.parentNode && grMY[i].removeChild(op)
});
grMY[i].children.length ?
sMY.appendChild(grMY[i]) : grMY[i].parentNode && sMY.removeChild(grMY[i])
})
}
inpMY.addEventListener("input", FiltrGoAnother, false)
});
</script>
</head>
<body>
<div class="content">
<input type="text" id="search" class="inputSearch" >
</div>
<!-- Сюда выводится сгенерированный селект отвечающий условю поиска -->
<div class="content" id="output">
<select class="MYlistbox" size="25" id="carsSelect">
<optgroup label="Местность 1">
<option value="Машина 06265">Машина 06265 | Водитель</option>
<option value="Машина2 15308">Машина2 15308 | Водитель</option>
</optgroup>
<optgroup label="Местность 2">
<option value="Машина3 06268">Машина3 06268 | Водитель3</option>
<option value="Машина4 08202">Машина4 08202 | Водитель4</option>
<option value="Машина5 08203">Машина4 08203 | Водитель5</option>
<option value="Машина6 08204">Машина4 08204 | Водитель6</option>
</optgroup>
</select>
</div>
</body>
</html>