Взял основу отсюда
html select быстрый выбор
Но не найдя решения для optgroup воспользовался innerHTML
ГЛАВНАЯ проблема - это ошибка в фильтрации. Например при вводе "08" пропадает "Машина4 08203 | Водитель5". Но "08203" находит "Машина4 08203 | Водитель5"
. Почему? Как исправить?
<!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>
function FiltrGoAnother() {
var retSTR="";//переменная для возврата из ф-ции
var regMY; //переменная для проверочного условия
var inpMY = document.getElementById("search"); //переменная текстового инпута, в готорый будет вводится проверочная строка
regMY = new RegExp(inpMY.value, "ig"); //если искать только в начале "^" + inpMY.value, "ig"
//sMY.options.length = 0; //переменная sMY это глобальная переменная элемента select (создано ниже)
var TMPstrP=""; //переменная для первой групы
var TMPstrN=""; //переменная для второй групы
//цикл создания списков техники, переменная oMY это глобальная переменная с первоначальными элементами option из select (создано ниже)
for (var i=0; i<oMY.length; i++)
{
if(regMY.test(oMY[i].text))//проблема где-то здесь. Отсекаются нужные строки
{
if(i<helpGr1)
{
TMPstrP=TMPstrP+'<option value="'+oMY[i].value+'">'+oMY[i].text+'</option>';
}
else
{
TMPstrN=TMPstrN+'<option value="'+oMY[i].value+'">'+oMY[i].text+'</option>';
}
}
}
//создание строки возврата
retSTR=retSTR+ '<select class="MYlistbox" size="25" id="carsSelect">';
if(TMPstrP!="")
{
retSTR=retSTR+ '<optgroup label="Местность 1">' + TMPstrP + '</optgroup>';
}
if(TMPstrN!="")
{
retSTR=retSTR+ '<optgroup label="Местность 2">' + TMPstrN + '</optgroup>';
}
retSTR=retSTR+ '</select>';
//возврат результата
var div = document.getElementById('output');
div.innerHTML = retSTR;
}
</script>
</head>
<body>
<div class="content">
<input type="text" id="search" class="inputSearch" oninput="FiltrGoAnother()">
</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>
<script type="text/javascript">
var helpGr1=2; //количество элементов в первой групе
var sMY = document.getElementById("carsSelect"); //переменная элемента select
var oMY = sMY.querySelectorAll("option"); //переменная с первоначальными элементами option из select
</script>
</body>
</html>