Показать сообщение отдельно
  #8 (permalink)  
Старый 22.09.2023, 09:59
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,753

Переделав вариант из поста #1
могу предложить следующее

<div>
<table>
<tr>
    <td><input type="text" name="article[]" id="article" placeholder="article" /></td>
    <td><input type="text" name="name[]" id="name" placeholder="Name"  /></td>
    <td><input type="text" name="code[]" id="code" placeholder="Code"  /></td>
    <td><input type="text" name="ven[]"  id="ven"  placeholder="ven"  /></td>
</tr>
<tr>
    <td><input type="text" name="article[]" id="article" placeholder="article" /></td>
    <td><input type="text" name="name[]" id="name" placeholder="Name"  /></td>
    <td><input type="text" name="code[]" id="code" placeholder="Code"  /></td>
    <td><input type="text" name="ven[]"  id="ven"  placeholder="ven"  /></td>
</tr>
<tr>
    <td><input type="text" name="article[]" id="article" placeholder="article" /></td>
    <td><input type="text" name="name[]" id="name" placeholder="Name"  /></td>
    <td><input type="text" name="code[]" id="code" placeholder="Code"  /></td>
    <td><input type="text" name="ven[]"  id="ven"  placeholder="ven"  /></td>
</tr>
</table>
<ul id="result"></ul>
</div>
</body>


// Заполнение строки даблицы
// data - эдемент массива данных
// inp - элемент ввода по которому искали
// li - элемент на котором кликнули
function outputInTable(data, inp, li) {
	const tr = inp.closest('tr');
	tr.querySelector('[name="article[]"]').value = data.article;
	tr.querySelector('[name="name[]"]').value = data.name;
	tr.querySelector('[name="code[]"]').value = data.code;
	tr.querySelector('[name="ven[]"]').value = data.ven;
	li.closest('ul').textContent = '';
}

// Вывод списка найденых
// inp - элемент в котором был ввод
// ardata - массив найденых значений
function outputSearchData (inp, ardata) {
	const ul = document.getElementById('result');
	ul.textContent = '';
	for (const data of ardata) {
		const li = document.createElement('li');
		li.textContent = data.name;
		ul.append(li);
		li.addEventListener('click', () => outputInTable(data, inp, li), {once:true});
	}
}

function findItem ({target}) {
	const searchStr = target.value;
	fetch('test_ajax_out.php?q='+searchStr)
	.then(responce => responce.json())
	.then (data => outputSearchData(target, data))
}

document.addEventListener('DOMContentLoaded', () => {
	const articles = document.querySelectorAll('input[name="article[]"]')
	articles.forEach(article => article.addEventListener('keyup', findItem));
})
Ответить с цитированием