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

Сообщение от Sheratan
если решил ввести новую позиции как-бы отменив свой выбор в списке
Не убирать список после выбора позиции в нем. При вводе в другой article просто показывать новый список.
Другое дело, что если пользователь вводит в article, потом выбирает из списка, потом решает, что ошибся, меняет article так, что список оказывается пустым и теперь ему надо вводить все поля вручную. Тут уже будет невозможно ввести, так как поля уже отмечены readonly.
Надо снимать этот атрибут, если список пуст.
По хорошему надо и значения всех полей убирать, если пользователь начинает исправлять article

Что то типа такого
// Заполнение строки даблицы
// 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), {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('input', findItem));
})

Последний раз редактировалось voraa, 22.09.2023 в 11:57.
Ответить с цитированием