Как подключить скрипт к 2 разным формам select?

Question

[Макс Darkleviathan]

Сам код:

<input class=search type='text' id='selectFilter' placeholder='введите для поиска' />
<select class=select name=p23 id=p23>
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
<input class=search type='text' id='selectFilter2' placeholder='введите для поиска' />
<select class=select name=p22 id=p22>
<option>test4</option>
<option>test5</option>
<option>test6</option>
</select>
<script>
var select = document.getElementById('p23');
var oldOptions = Array.apply(undefined, select.options); 

document.getElementById('selectFilter').onkeyup = function(e) {
  
  if (e.ctrlKey || e.altKey || e.metaKey) return;

  select.options.length = 0;
  var regexp = new RegExp(this.value, 'ig');
  for (var i = 0; i < oldOptions.length; i++) {
    if (oldOptions[i].innerText.search(regexp) >= 0) {
      select.appendChild(oldOptions[i]);
    }
  }
};

var select = document.getElementById('p22');
var oldOptions = Array.apply(undefined, select.options); 

document.getElementById('selectFilter2').onkeyup = function(e) {
  
  if (e.ctrlKey || e.altKey || e.metaKey) return;

  select.options.length = 0;
  var regexp = new RegExp(this.value, 'ig');
  for (var i = 0; i < oldOptions.length; i++) {
    if (oldOptions[i].innerText.search(regexp) >= 0) {
      select.appendChild(oldOptions[i]);
    }
  }
};
</script>

Пробовал делать 2 разных скрипта с указаниями id select'ов и id input'ов но тогда поиск идет что в первом что во втором input по первому select'у.
Как мне присвоить двум разным формам свои input'ы для поиска?

Answer 1

[Николай Чуприк]

Конечно не будет работать. Вы сначала определили
var select = document.getElementById('p23');, а потом
var select = document.getElementById('p22');
И при вызове обработчиков будет использовать актуальное значение select, т.е. последнее. Когда вы пишите

document.getElementById('selectFilter2').onkeyup = function(e)

, вы просто сообщаете, что при событии надо вызывать эту функцию. А работать она будет в контексте и с теми значениями глобальных переменных, какие будут на момент срабатывания события.

И вообще тут всё надо переписать.

UPD:

Без jQ:

document.querySelectorAll( '.search' ).forEach( function( searchInput, number ) {
	//  Передаём input-элемент и его порядковый номер на странице (первый - нулевой)
	
	this.onkeyup = function( e )	{
	
		if ( e.ctrlKey || e.altKey || e.metaKey ) return;
		
		var select = document.querySelectorAll( 'select' )[ number ];  //  Работаем с группой select с порядковыи номером на странице таким же, как у input, на котором произошло событие
		
		select.options.forEach( function()	{
		
			//  Если option соответствует поиску, то делаем видимым, если нет — скрываем
			if ( this.innerHTML.test( searchInput.value ) )
				this.style.display = 'inline';
			else
				this.style.display = 'none';
		} )
	}
} )

UPD2:

На jQ:

<input class = 'search' id = '1' onkeyup = 'search( this )'... >
<select id = '1' ...>
...
<input class = 'search' id = '2' onkeyup= 'search( this )'... >
<select id = '2' ...>
...

function search( i ) {
	$( 'select#' + i.attr( 'id' ) + ' option' ).forEach( $( this ).toggle( $( this ).html().test( i.value ) ) )
}

Comments

[Макс Darkleviathan]

в jquery я не силен, поэтому переписать будет крайне проблематично.

[Николай Чуприк]

Макс Darkleviathan, посмотрите два апдейта. Последний вариант вообще краткий получился.

Answer 2

[hzzzzl]

незачем jquery
https://codepen.io/anon/pen/BbpBGK

Comments

[Макс Darkleviathan]

А каким образом убрать чувствительность к большой/маленькой букве?

[hzzzzl]

Макс Darkleviathan, здесь поменять на input.value.toLowerCase()

.....
for(let i = 0; i < options.length; i++) {
  if(options[i].value.indexOf(input.value.toLowerCase()) !== -1) {
......