Javascript 是否将搜索结果附加到相应的父div？

我正在使用webSocket实现自动完成。当我输入包含classname

项目搜索结果的输入字段时，将显示一组结果。我的问题是结果只会附加到第一个
项目搜索结果
输入字段

但我需要结果显示在右侧的
项目搜索结果
输入字段下。
例如，我在第四个
项目搜索结果
输入字段中键入，但结果会附加到第一个字段

这是我的webSocket js，我使用jQuery：

$(function () {
  let webSocket = new WebSocket("ws://localhost:8000/autocomplete");
  webSocket.onopen = (msgEvent) => {
    console.log('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.log(resultsArr);
    $.each(resultsArr, (index, value) => {
      $('<div>' + value['name'] + '</div>').attr('id', 'item-search-results-' + index).appendTo($('.item-search-results'));
    });
  };

  webSocket.onclose = (msgEvent) => {
    console.log('disconnected');
  };

  webSocket.onerror = (msgEvent) => {
    console.log('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.log(value);
    })
})

$（函数（）{
让webSocket=newWebSocket（“ws://localhost:8000/autocomplete”）；
webSocket.onopen=（msgEvent）=>{
log（'连接到WebSocket！'）；
};
webSocket.onmessage=（msgEvent）=>{
/*结果显示{“结果”：{“结果”：[{..}]}。
results.results显示{results:[{..}]}
results.results.results显示[{…}]，它是一个数组*/
让results=JSON.parse（msgEvent.data），
resultsArr=results.results.results；
console.log（resultsArr）；
$.each（resultsArr，（索引，值）=>{
$（''+值['name']+''）.attr（'id'，'item search results-'+索引）.appendTo（$（'.item search results'）；
});
};
webSocket.onclose=（msgEvent）=>{
console.log（'disconnected'）；
};
webSocket.onerror=（msgEvent）=>{
log（“有一个错误”）；
};
/**
*请求显示数据
*/
$（'.add items table'）。on（'input'，'.item input'，（e）=>{
设值=e.target.value；
发送（值）；
console.log（值）；
})
})
不确定
Websocket
但以下是您的方法。获取表的最后一行
并在该行之后追加数据


var占位符=`
`;
函数addItem（）{
让totalElem=document.getElementsByCassName（'tr'）.length；
让lastElem=document.getElementsByClassName（'tr'）[totalElem-1]；
$.get（”https://jsonplaceholder.typicode.com/posts/1，函数（数据）{
$。每个（数据、功能（i、项）{
$（lastElem）.after（占位符）；
});
});
}

数量
项目
评论
去除
添加另一项
这里的问题是，您正在将它附加到
$（'.item search results'）
中，后者是一个类，并作为数组返回。当您运行
.appendTo（$（'.item search results'））
时，它将附加到数组的第一项

您应该为每个卷使用更具体的Id，并按Id追加

我认为@manikant创建模板的想法很棒，但我会引入一个变量，您可以为创建的每一新行更改该变量，并为每个
赋予不同的Id。项目搜索结果
div。但您必须将其发送到websocket并接收回以调用要追加的正确Id。
websocket在这里不相关，我不明白你为什么要做一个附加内部循环。尝试执行类似操作时，需要使用
$（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.log(value);
})

最后，附加到正确的

这可能会有所帮助：您必须使用jquery来完成吗？使用诸如vue或react之类的前端框架会容易得多。我尝试了最接近的方法，但什么都没有发生，结果甚至不会显示出来（我不能为这个项目使用任何框架@GuzzIt取决于
restapi
的要求和响应，这是不必要的。@kukumalu看到了编辑，但我在添加新行方面没有任何问题。我的问题是自动完成结果需要附加到相应的
项目搜索结果
输入字段。现在他们不使用
v。）ar
Item.list？有什么区别吗？我很困惑（一般来说），因为我被教导总是使用
const
和
let
我不熟悉let，如果你是这样声明变量的话，那么就使用它。我有一个错误。
websocket\u orders.js:44未捕获的语法错误：意外标记。
let Item={}；$（'.add items table'）。on（'input'，'.item input'，（e）=>{let item.list=$（this）.同级（'.item search results'）；let value=e.target.value；webSocket.send（value）；console.log（value）；}）
好的，问题是您混合了javascript和jQuery。在这种情况下，您需要使用
var
。我发布的内容中不应该有任何语法错误。
.appendTo(Item.list);