Ответ Ajax в нужную строку таблицы формы

[Sheratan]

В форме имеется таблица с дополняемыми строками скриптом JS
При вводе в первое поле "артикул" по AJAX делается запрос и в div получаем результат для выбора нужной позиции
При нажатии на выбранную позицию нужно заполнить поля название и код (item_name и item_code) в той строке таблицы в которой был ввод артикула

В JS новичок и совсем не понимаю как получить строку с полями и в нее же внести значения из одного общего DIV. Или целесообразнее делать вывод результатов в DIV для каждой строки таблицы?

Прошу помочь или подсказать или скинуть примеры подобной реализации

function find_item(str) {
 if (str.length==0) {
   document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
   return;
  }
 if (window.XMLHttpRequest) {
    // код для IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  }else {  // код для IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 xmlhttp.onreadystatechange=function() {
   if (this.readyState==4 && this.status==200) {
    document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
 xmlhttp.open("POST","test_ajax_out.php?q="+str,true);
 xmlhttp.send();
}

<form id="myForm">
<table>
<tr>
    <td><input type="text" name="article[]" onkeyup="find_item(this.value)" placeholder="Артикул" /></td>
    <td><input name="item_name[]" placeholder="Название" /></td>
    <td><input name="item_code[]" placeholder="Код" /></td></tr>
<tr>
    <td><input type="text" name="article[]" onkeyup="find_item(this.value)" placeholder="Артикул" /></td>
    <td><input name="item_name[]" placeholder="Название" /></td>
    <td><input name="item_code[]" placeholder="Код" /></td></tr>
<tr>
    <td><input type="text" name="article[]" onkeyup="find_item(this.value)" placeholder="Артикул" /></td>
    <td><input name="item_name[]" placeholder="Название" /></td>
    <td><input name="item_code[]" placeholder="Код" /></td></tr>
</table>   
<div id="livesearch">найденные варианты</div> 
</form>

Ответ AJAX - по запросу будут получены данные

<a href="#" onclick="" id="aa11">aaaaa</a><br />
<a href="#" onclick="" id="bb22">bbbbb</a><br />
<a href="#" onclick="" id="cc33">ccccc</a><br />
<a href="#" onclick="" id="dd44">ddddd</a><br />
<a href="#" onclick="" id="ee55">eeeee</a><br />

[Sheratan]

jquery-3.4.1 подключен
cms нет, весь код свой

[voraa]

И не использовать метод POST для GET запроса

xmlhttp.open("POST","test_ajax_out.php?q="+str,tru e);

[Sheratan]

Спасибо за подсказку.
-Переделал вывод на json
-Настроил вставку нескольких значений в свои поля
Но в силу своей безграмотности и малого опыта не понимаю как реализовать работу с несколькими строками.
Сейчас работает только первая строка.
Т.е. куда и как прикрутить $(this).closest('tr') чтобы не использовать id в полях.
Пожалуйста, помогите докурутить построчную работу.

<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[]"  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>

$(document).ready(function(){
 $.ajaxSetup({ cache: false });
 $('#article').keyup(function(){
  $('#result').html('');
  $('#code').val('');
  var searchField = $('#article').val();
  var expression = new RegExp(searchField, "i");
  var flickerAPI  = "test_ajax5_out.php";
  $.getJSON(flickerAPI , function(data) {
   $.each(data, function(key, value){
    if (value.article.search(expression) != -1)
    {
     $('#result').append('<li>'+value.name+'<span style="visibility: hidden;">|'+value.code+'|'+value.article+'|'+value.ven+'</span></li>');
    }
   });   
  });
 });
 
 $('#result').on('click', 'li', function() {
  var click_text = $(this).text().split('|');
  $('#article').val($.trim(click_text[2]));
  $('#name').val($.trim(click_text[0]));
  $('#code').val($.trim(click_text[1]));
  $('#ven').val($.trim(click_text[3]));
  $("#result").html('');
 });
});

[Sheratan]

Да, данные на сервер пока не передаются, т.к. основная проблема в многострочности поиска.
По первой строке все работает как нужно/ Вводится артикул - выдаются совпадающие по коду данные

выборка из базы это на потом отложил.
Пока важнее настроить таблицу

flickerAPI убрал, это было наследие от проб разных скриптов

[voraa]

Хотелось бы понять всю задачу, что бы код 100 раз не делать.

У вас в таблице input задан и для Name и для Code и для ven вместе с placeholder. В них тоже должно что то вводиться и искаться по ним?

[Sheratan]

задача:
- вводится артикул или его часть - появляется список, где есть вхождения введенного значения.
если в списке есть позиция и ее выбирают, то заполняются поля name code ven, а так-же сам артикул заполняется полностью.
При заполнении из списка поля name code ven перестают быть доступными для ввода (readonly),
далее переход к новой строке...
- Если введенный артикул или его часть не нашлись в списке или из списка не было ничего выбрано, то руками заполняются все поля,
далее переход к новой строке...

Список формируется по запросу введенного артикула и выбирается из базы более 50000 позиций

Собственно это все

[voraa]

Переделав вариант из поста #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));
})

[Sheratan]

Спасибо!
Отличная работа!
1 вопрос - в каком месте и как установить readonly для трех полей?
2 вопрос - после выбора в списке и подстановки в таблицу, в случае правки артикула нужно сбросить заполненные поля и снять readonly

[voraa]

Один вопрос - в каком месте и как установить readonly для трех полей?

Немного переделал

// Заполнение строки даблицы
// data - эдемент массива данных
// inp - элемент ввода по которому искали
function outputInTable(data, inp) {
	const tr = inp.closest('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;
}

// Вывод списка найденых
// 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);
				ul.textContent = '';
			},
			{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));
})