Как объединить две функции в одну?

Question

[ТемноКот]

Доброго времени суток, уважаемые!
Как можно объединить две одинаковых функции для поиска строк в таблице?
Первая (по input)

$('#search_table').keyup(function(){
		let search = this;
		$('#tabname tbody tr').find('input[name^=name]').each(function() {
			if($(this).val().toLowerCase().indexOf($(search).val().toLowerCase()) === -1) {
				$(this).closest('tr').hide();
			}
			else {
				$(this).closest('tr').show();   
			}  
		});
	});

Вторая (по атрибуту)

$('#search_card').keyup(function(){
		let search = this;
		$('#tabname tbody tr').find('[data-item-name="name"]').each(function() {
			if($(this).text().toLowerCase().indexOf($(search).val().toLowerCase()) === -1) {
				$(this).closest('tr').hide();
			}
			else {
				$(this).closest('tr').show();   
			}  
		});
	});

Смысл у них абсолютно одинаков - найти строки с задаваемым в поиске значением и вернуть результат, убрав остальное. Разница лишь в том, что первая ищет в значениях поля input[name^=name], а вторая в тексте элемента с атрибутом [data-item-name="name"].
Вот никак не могу сообразить, как их объединить, прописав условие если $(this).val() или $(this).text()
Помогите, плиз!

Answer 1

[Сергей Соколов]

Тут 6 параметров – две группы по 3:

1. кого слушаем #search_table VS #search_card
   
2. что ищем input[name^=name] VS [data-item-name="name"]
   
3. и с чем сравниваем val() VS text()
   

Вытащить всё в параметры:

const addFilter = (listenSelector, findSelector, methodName) => {
  $(listenSelector).keyup(function search() {
    const search = this;
    const searchValue = $(search).val().toLowerCase();

    $("#tabname tbody tr")
      .find(findSelector)
      .each(function () {
        const currentValue = $(this)[methodName]().toLowerCase();
        $(this).closest("tr").toggle(currentValue.includes(searchValue));
      });
  });
};

addFilter('#search_table', 'input[name^=name]', 'val');
addFilter('#search_card', '[data-item-name="name"]', 'text');

Comments

[ТемноКот]

Уф... не работает =(
То есть работает, но ТОЛЬКО по инпутам, по атрибутам искать не хочет
Набросал в кодепен, но всё рано не понял, почему https://codepen.io/akira13w/pen/poKweaN

[Сергей Соколов]

ТемноКот, в песочнице всё плохо с id в разметке.

Приведите в порядок: где слушаем keyup, в какой таблице ищем.
В вопросе отсутсвует разметка, а поиск строк, которые прятать/показывать идёт в одной и той же #tabname

[ТемноКот]

Извините, я не знаю, как в песочнице две страницы отобразить.
То есть, в проекте есть две страницы, на каждой таблица #tabname с данными.
Но на одной странице в таблице #tabname данные представлены в значениях инпута, а на другой странице в таблице #tabname текст в элементе h5 с атрибутом [data-item-name="name"].

Вот я и сделал в песочнице разметку обеих таблиц, просто id="#tabname" менял в ручную для проверки.
Хм... наверное так надо было...
Страница 1 (таблица с input)
https://codepen.io/pen?template=poKweaN
Страница 1 (таблица с атрибутами)
https://codepen.io/pen?template=ExRXmWG
Скрипт на обеих страницах один и тот же

[ТемноКот]

Упс... извините, пожалуйста. Про второй скрипт забыл!!!
Вот он работает на обеих страницах и по атрибуту и по инпуту.
Спасибо!

[ТемноКот]

Сергей Соколов, UPD. не могли бы вы вынести ВТОРОЙ вариант с "вытащить всё в параметры" из комментариев в "ответы", чтобы я отметил его, как "решение"?

[Сергей Соколов]

ТемноКот, оба варианта не в комментариях, а в ответе. Соберитесь )

[ТемноКот]

Так в том то и дело, что было оба. И первый не хотел работать =)
Вот второй заработал, и я даже почти понял, как.
Ещё раз спасибо за помощь.

Answer 2

[0xD34F]

const searchOptions = [
  [ '#search_table', tr => $('input[name^=name]', tr).val() ],
  [ '#search_card', tr => $('[data-item-name="name"]', tr).text() ]
];

$(searchOptions.map(n => n[0]).join(', ')).on('input', () => {
  const values = searchOptions.map(n => $(n[0]).val().toLowerCase());

  $('#tabname tbody tr')
    .hide()
    .filter((i, n) => searchOptions.every((m, j) => m[1](n).toLowerCase().includes(values[j])))
    .show();
});

Comments

[ТемноКот]

Извините, ваш код слишком сложный для чайника и что не работает точно сказать не могу. Но комп выдаёт ошибку в const values = searchOptions.map(n => $(n[0]).val().toLowerCase());
TypeError: $(...).val() is undefined

[0xD34F]

ТемноКот, отсутствует одно (а может и оба, разметку вы от большого ума решили не показывать) из полей ввода. То есть, вы наврали в тексте вопроса.

[ТемноКот]

Просто не хотел засорять вопрос. Разметка простейшая.
Инпут

<table id="tabname">
    <tbody>
     <tr>
      <td>
       <input type="text" name="name[]" value="Бетон" class="form-control form-control-sm">
....

Атрибут

<table id="tabname">
    <tbody>
     <tr>
      <td>
      <h5 data-item-name="name" class="d-inline me-3">Планшет</h5>
....

Вот на кодепен https://codepen.io/pen?template=LYrLWvM

[0xD34F]

Просто не хотел засорять вопрос.

ТемноКот, вот это правильно - скрывать информацию о своей проблеме. Это гарантирует максимально быстрое получение наиточнейшего ответа.

Вот на кодепен

Ну да, #search_table вижу, а #search_card где? Таблиц две, в то время как в тексте вопроса речь шла про одну.

ВАМ ЧЕГО НАДО, А?!!

[ТемноКот]

Уф... Извините, но я не знаю, как в песочнице ДВЕ страницы отобразить!
То есть, в проекте есть две страницы, на каждой таблица #tabname с данными.
Но на одной странице в таблице #tabname данные представлены в значениях инпута, а на другой странице в таблице #tabname текст в элементе h5 с атрибутом [data-item-name="name"].

Вот я и сделал в песочнице разметку обеих таблиц, просто id="#tabname" менял в ручную для проверки.
Вот так в проекте:
Страница 1 (таблица с input)
https://codepen.io/pen?template=poKweaN
Страница 1 (таблица с атрибутами)
https://codepen.io/pen?template=ExRXmWG
И мне надо, чтобы этот один и тот же скрипт работал на обеих страницах.

[0xD34F]

ТемноКот, тогда выносите в отдельный файл, который подключаете на обеих страницах, функцию:

function createSearch(selector, valFn) {
  $(selector).on('input', function() {
    const val = $(this).val().toLowerCase();
    $('#tabname tbody tr')
      .hide()
      .filter((i, n) => valFn(n).toLowerCase().includes(val))
      .show();
  });
}

Затем на одной странице добавляете

createSearch('#search_table', tr => $('input[name^=name]', tr).val());

, а на другой

createSearch('#search_card', tr => $('[data-item-name="name"]', tr).text());

[ТемноКот]

Спасибо. Теперь всё работает.
А нельзя ли ещё упростить, сделав одно поле поиска... допустим $('#search'), которое будет на обеих страницах, а уже в скрипте прописать условие для выбора между .val() и .text()?

Или не стоит овчинка выделки? Потому что придётся в скрипт пихать проверку всей таблицы на наличие атрибутов/инпутов? И если таблица будет большая то двойная проверка (сначала есть или инпут/атрибут), а потом уже поиск в ней переданного из $('#search') производительности точно не добавит.

[ТемноКот]

UPD. не могли бы вы вынести последний вариант из комментариев ( function createSearch(selector, valFn) {... )
в "ответы", чтобы я отметил его, как "решение"?

Answer 3

[Олег Колесников]

То что ищем передавать в параметрах функции.
Написал самый простой вариант, если параметров много, то можно дописать функцию и сразу передавать массив параметров

$('#search_card').keyup(function(){
    let search = this;
showAndHide ('[data-item-name="name"]');
showAndHide ('input[name^=name]');
function showAndHide (param) {
    $('#tabname tbody tr').find(param).each(function() {
      if($(this).text().toLowerCase().indexOf($(search).val().toLowerCase()) === -1) {
        $(this).closest('tr').hide();
      }
      else {
        $(this).closest('tr').show();   
      }  
    });
  });
}

Comments

[ТемноКот]

Извините, но это не будет работать в случае input. Потому что .text() значений в поле input не видит.
В этом как раз и проблема, что надо как-то менять режим поиска из .text() или .val() в зависимости от
('[data-item-name="name"]');
('input[name^=name]');
А я не могу сообразить как это сделать, чтобы изячно и красиво =(