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

В форме имеется таблица с дополняемыми строками скриптом 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 нет? Cамописный движок cms на чистом js?

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

Sheratan,
Тогда на jquery надо писать. Ответ ajax делать в json: [{"code":"aa11","name":"aaaaa"},{"code":"bb22","nam e":"bbbbb"}]. Клик по найденным вариантам вешать на общий div. Строку с полями можно получить так $(this).closest('tr').

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

Спасибо за подсказку.
-Переделал вывод на 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,
Пока непонятно что нужно, сейчас ты данные на сервер не передаешь, в первом посте передавал... Если контент json не зависит от данных запроса, то нет смысла каждый keyup делать ajax. flickerAPI тут вообще при чем? Надо читать тогда его доки, там и примеры есть.

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

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

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

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

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

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

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

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