|
Сообщение от Sheratan
|
|
В добавленных сроках не работает поиск
|
Вот почему не спрашивать и не описывать задачу всю сразу. Со всеми особенностями. Как будто одно от другого не зависит
Тогда к table id добавить
<body>
<div>
<table id="table">
<tr>
<td><input type="text" name="article[]" placeholder="article" /></td>
<td><input type="text" name="name[]" placeholder="Name" /></td>
<td><input type="text" name="code[]" placeholder="Code" /></td>
<td><input type="text" name="ven[]" placeholder="ven" /></td>
</tr>
<tr>
<td><input type="text" name="article[]" placeholder="article" /></td>
<td><input type="text" name="name[]" placeholder="Name" /></td>
<td><input type="text" name="code[]" placeholder="Code" /></td>
<td><input type="text" name="ven[]" placeholder="ven" /></td>
</tr>
<tr>
<td><input type="text" name="article[]" placeholder="article" /></td>
<td><input type="text" name="name[]" placeholder="Name" /></td>
<td><input type="text" name="code[]" placeholder="Code" /></td>
<td><input type="text" name="ven[]" placeholder="ven" /></td>
</tr>
</table>
<ul id="result"></ul>
</div>
И событие input ловим на таблице и проверяем, что это нужный элемент (делегирование)
// Заполнение строки таблицы
// data - элемент массива данных
// tr - строка в которую был ввод
function outputInTable(data, tr) {
const article = tr.querySelector('[name="article[]"]');
article.value = data.article;
const name = tr.querySelector('[name="name[]"]');
name.value = data.name;
name.readOnly = true;
const code = tr.querySelector('[name="code[]"]');
code.value = data.code;
code.readOnly = true;
const ven = tr.querySelector('[name="ven[]"]');
ven.value = data.ven;
ven.readOnly = true;
}
// Очистка строки в которую идет ввод и снятие readonly
// tr - строка в которую был ввод
function clearFields (tr) {
const name = tr.querySelector('[name="name[]"]');
name.value = '';
name.readOnly = false;
const code = tr.querySelector('[name="code[]"]');
code.value = '';
code.readOnly = false;
const ven = tr.querySelector('[name="ven[]"]');
ven.value = '';
ven.readOnly = false;
}
// Вывод списка найденных
// inp - элемент в котором был ввод
// ardata - массив найденных значений
function outputSearchData (inp, ardata) {
const ul = document.getElementById('result');
ul.textContent = '';
const tr = inp.closest('tr');
clearFields(tr);
for (const data of ardata) {
const li = document.createElement('li');
li.textContent = data.name;
ul.append(li);
li.addEventListener('click', () => {
outputInTable(data, tr);
ul.textContent = '';
},
{once:true} );
}
}
const MINSEARCHLENGTH = 3;
async function findItem ({target}) {
if (target.name !== 'article[]') return;
const searchStr = target.value;
let data;
if (searchStr.length >= MINSEARCHLENGTH) {
const responce = await fetch('test_ajax_out.php?q='+searchStr);
data = await responce.json();
} else {
data = await [];
}
outputSearchData(target, data);
}
document.addEventListener('DOMContentLoaded', () => {
const table = document.getElementById('table')
table.addEventListener('input', findItem);
})