Javascript-форум - html select & optgroup быстрый выбор (правка ошибок)

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - html select & optgroup быстрый выбор (правка ошибок) (https://javascript.ru/forum/misc/64287-html-select-optgroup-bystryjj-vybor-pravka-oshibok.html)

html select & optgroup быстрый выбор (правка ошибок)

Взял основу отсюда http://javascript.ru/forum/css-html/...tml#post372707

Но не найдя решения для optgroup воспользовался innerHTML

ГЛАВНАЯ проблема - это ошибка в фильтрации. Например при вводе "08" пропадает "Машина4 08203 | Водитель5". Но "08203" находит "Машина4 08203 | Водитель5" :blink: . Почему? Как исправить?

<!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>

быстрый поиск по select optgroup

Илья_Яришов,

<!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.lastIndex = 0;
                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>

Огромна благодарность!!!:thanks:

Метод супер. Костыли отвинтил. Красава.

Понял закономерность потери строк, которые соответствуют условию поиска. И сделал фикс (может костыль, но работает).:dance:
ПРОШУ объясните почему вылазит глюк и как правильно фиксить?
Закономерность такова: если два раза подряд попадаются 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>

Илья_Яришов,
индекс реги надо обнулять забыл добавить иначе поиск с предыдущего найденного места
пост 2 строка 45 проверьте

Да :yes: теперь ВСЕ РАБОТАЕТ КАК ЧАСЫ. Рони, еще раз спасибо за помощь. :thanks:

Илья_Яришов,
можно ещё вместо строки 45 использовать строку 42 (перенести)-- формировать регу каждый раз -- это затратнее чем обнулять индекс, но на малых количествах заметно не будет

Примерно такая же история, как с тем чуваком, который value инпута менял методом innerHTML.