Ответ 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 /> |
jquery-3.4.1 подключен
cms нет, весь код свой |
И не использовать метод 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('');
});
});
|
Да, данные на сервер пока не передаются, т.к. основная проблема в многострочности поиска.
По первой строке все работает как нужно/ Вводится артикул - выдаются совпадающие по коду данные выборка из базы это на потом отложил. Пока важнее настроить таблицу flickerAPI убрал, это было наследие от проб разных скриптов |
Хотелось бы понять всю задачу, что бы код 100 раз не делать.
У вас в таблице input задан и для Name и для Code и для ven вместе с placeholder. В них тоже должно что то вводиться и искаться по ним? |
задача:
- вводится артикул или его часть - появляется список, где есть вхождения введенного значения. если в списке есть позиция и ее выбирают, то заполняются поля name code ven, а так-же сам артикул заполняется полностью. При заполнении из списка поля name code ven перестают быть доступными для ввода (readonly), далее переход к новой строке... - Если введенный артикул или его часть не нашлись в списке или из списка не было ничего выбрано, то руками заполняются все поля, далее переход к новой строке... Список формируется по запросу введенного артикула и выбирается из базы более 50000 позиций Собственно это все |
Переделав вариант из поста #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));
})
|
Спасибо!
Отличная работа! 1 вопрос - в каком месте и как установить readonly для трех полей? 2 вопрос - после выбора в списке и подстановки в таблицу, в случае правки артикула нужно сбросить заполненные поля и снять 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));
})
|
| Часовой пояс GMT +3, время: 08:19. |