Добавить результаты поиска в соответствующий родительский div?
Я реализую автозаполнение с помощью webSocket. Когда я набираю поле ввода с именем класса item-search-results, в группе результатов будет отображаться скриншот результатов поиска. Моя проблема в том, что результат будет прикреплен только к самому первому полю ввода item-search-results.
Но мне нужно, чтобы результаты отображались в правом поле ввода item-search-results.
Например, я печатаю в 4-м поле ввода item-search-results, но результаты прикрепляются к первому результаты прикреплены к скриншоту первой строки
Вот мой webSocket js, я использую jQuery:
$(function () {
let webSocket = new WebSocket("ws://localhost:8000/autocomplete");
webSocket.onopen = (msgEvent) => {
console.info('connected to WebSocket!');
};
webSocket.onmessage = (msgEvent) => {
/* results shows {"results":{"results":[{..}]}}.
results.results shows {results:[{..}]}
results.results.results shows [{...}], which is an array */
let results = JSON.parse(msgEvent.data),
resultsArr = results.results.results;
console.info(resultsArr);
$.each(resultsArr, (index, value) => {
$('<div>' + value['name'] + '</div>').attr('id', 'item-search-results-' + index).appendTo($('.item-search-results'));
});
};
webSocket.onclose = (msgEvent) => {
console.info('disconnected');
};
webSocket.onerror = (msgEvent) => {
console.info('there\'s an error');
};
/**
* Request to display data
*/
$('.add-items-table').on('input', '.item-input', (e) => {
let value = e.target.value;
webSocket.send(value);
console.info(value);
})
})
Вам нужно использовать jquery для этого? Было бы намного проще использовать какой-нибудь интерфейсный фреймворк, например vue или react.
Я пробовал самое близкое, но ничего не вышло, даже результаты не отображаются. :(
Я не могу использовать какой-либо фреймворк для этого проекта @Guzz
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Не уверен насчет Websocket Но вот как вы подойдете. Получите последний Row таблицы и добавьте данные после этой конкретной строки.
var placeHolder=` <tr>
<td style = "width: 16.66%">
<input type = "text" name = "quanty" value = "">
</td>
<td class = "item-search-container">
<input class = "item-input" id = "item-input-0" type = "search" name = "item" value = "">
<div class = "item-search-results"></div>
</td>
<td>
<input type = "text" name = "quanty" value = "">
</td>
</tr>`;
function addItem(){
let totalElem=document.getElementsByClassName('tr').length;
let lastElem=document.getElementsByClassName('tr')[totalElem-1];
$.get( "https://jsonplaceholder.typicode.com/posts/1", function( data ) {
$.each(data, function(i, item) {
$(lastElem).after(placeHolder);
});
});
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class = "item-form">
<table class = "add-items-table table table-hover ">
<thead>
<tr>
<th>Quanty</th>
<th>Item</th>
<th>Comment</th>
<th>Remove</th>
</tr>
</thead>
<tbody class = "item-row">
<tr class = "tr">
<td style = "width: 16.66%">
<input type = "text" name = "quanty" value = "">
</td>
<td class = "item-search-container">
<input class = "item-input" id = "item-input-0" type = "search" name = "item" value = "">
<div class = "item-search-results"></div>
</td>
<td>
<input type = "text" name = "quanty" value = "">
</td>
<td>
<button class = "remove-item-button btn-block btn-outline-danger" type = "reset" name = "remove">
<i class = "fa fa-trash-o" aria-hidden = "true"></i>
</button>
</td>
</tr>
</tbody>
</table>
<button class = "add-item" onClick = "addItem()">Add Another Item</button>
</section>Это зависит от требований и ответа от REST API не требуется. @ Kukumalu см. Правки
Но у меня нет проблем с добавлением новой строки. У меня проблема заключается в том, что результат автозаполнения необходимо прикрепить к соответствующему полю ввода item-search-results. Прямо сейчас они этого не делают
Проблема здесь в том, что вы добавляете его к $('.item-search-results'), который является классом и возвращается в виде массива. Когда вы запустите .appendTo($('.item-search-results')), он добавится к первому элементу массива.
Вы должны использовать более конкретный идентификатор для каждого рулона и добавлять его по идентификатору.
Я думаю, что идея @manikant о создании шаблона прекрасна, но я бы представил переменную, которую вы можете изменить для каждой новой строки, которую вы создаете, и присвоить разные идентификаторы каждому блоку .item-search-results. Но вам нужно будет отправить это в веб-сокет и получить обратно, чтобы вызвать правильный идентификатор для добавления.
Веб-сокеты здесь не имеют значения, и я не понимаю, почему вы выполняете добавление внутреннего цикла. Когда вы пытаетесь сделать что-то подобное, вам нужно использовать селектор $(this), который будет элементом, который вы действительно щелкаете.
Вверху вашего скрипта создайте глобальную переменную или пространство имен.
var Item = {};
/* In this chunk of code, create an object which you can use as a reference */
$('.add-items-table').on('input', '.item-input', (e) => {
/* this will be the correct .item-search-results div */
var Item.list = $(this).siblings('.item-search-results');
let value = e.target.value;
webSocket.send(value);
console.info(value);
})
Наконец, добавьте к правильному <div>.
.appendTo(Item.list);
зачем использовать var Item.list? В чем разница? Я очень запутался (в общем), потому что меня учили всегда использовать const и let
Я не знаком с let, если вы так объявляете свои переменные, то используйте это.
У меня ошибка. websocket_orders.js:44 Uncaught SyntaxError: Unexpected token .let Item = {}; $('.add-items-table').on('input', '.item-input', (e) => { let Item.list = $(this).siblings('.item-search-results'); let value = e.target.value; webSocket.send(value); console.info(value); });
Хорошо, проблема в том, что вы смешиваете javascript и jQuery. В этом случае вам нужно использовать var.
В том, что я опубликовал, не должно быть синтаксических ошибок.
Итак, я объявил переменную let activeInput;, затем в функции прослушивания событий, activeInput = e.target;, а затем в функции добавления, это itemSearchResults.appendTo($(activeInput).closest('.item-search-container'));. Таким образом, списки результатов прикрепляются к нужному месту.
Думаю, это может помочь: api.jquery.com/closest