Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2016, 12:09
Новичок на форуме
Отправить личное сообщение для Илья_Яришов Посмотреть профиль Найти все сообщения от Илья_Яришов
 
Регистрация: 01.08.2016
Сообщений: 5

html select & optgroup быстрый выбор (правка ошибок)
Взял основу отсюда 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>

Последний раз редактировалось Илья_Яришов, 01.08.2016 в 12:12.
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2016, 13:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

быстрый поиск по 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>

Последний раз редактировалось рони, 01.08.2016 в 15:18.
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2016, 15:01
Новичок на форуме
Отправить личное сообщение для Илья_Яришов Посмотреть профиль Найти все сообщения от Илья_Яришов
 
Регистрация: 01.08.2016
Сообщений: 5

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

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

Понял закономерность потери строк, которые соответствуют условию поиска. И сделал фикс (может костыль, но работает).
ПРОШУ объясните почему вылазит глюк и как правильно фиксить?
Закономерность такова: если два раза подряд попадаются 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>
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2016, 15:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Последний раз редактировалось рони, 01.08.2016 в 15:21.
Ответить с цитированием
  #5 (permalink)  
Старый 01.08.2016, 15:22
Новичок на форуме
Отправить личное сообщение для Илья_Яришов Посмотреть профиль Найти все сообщения от Илья_Яришов
 
Регистрация: 01.08.2016
Сообщений: 5

Да теперь ВСЕ РАБОТАЕТ КАК ЧАСЫ. Рони, еще раз спасибо за помощь.
Ответить с цитированием
  #6 (permalink)  
Старый 01.08.2016, 15:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Илья_Яришов,
можно ещё вместо строки 45 использовать строку 42 (перенести)-- формировать регу каждый раз -- это затратнее чем обнулять индекс, но на малых количествах заметно не будет
Ответить с цитированием
  #7 (permalink)  
Старый 02.08.2016, 05:19
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
html select быстрый выбор kristow Javascript под браузер 3 01.08.2016 15:12
Select, optionl, и автоматический выбор Rorbi Элементы интерфейса 2 29.05.2014 15:38
помогите с многомерным массивом dima*** Общие вопросы Javascript 8 03.04.2013 00:04
выбор в select Александр141 Элементы интерфейса 4 03.11.2012 13:53
Выбор всех Select kvaleksandr Элементы интерфейса 12 27.10.2012 20:55