javascript - 将搜索结果附加到各自的父 div？

Question

我正在使用 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.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);
    })
})

Answer 1

不确定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>

Answer 2

这里的问题是您将它附加到$('.item-search-results')一个类并作为数组返回。当您运行.appendTo($('.item-search-results'))时，它将附加到数组的第一项。

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

我认为@manikant 创建模板的想法很棒，但我会引入一个变量，您可以为创建的每个新行更改该变量，并为每个.item-search-resultsdiv 提供不同的 Id。但是您必须将其发送到 websocket 并接收它以调用正确的 Id 来追加。

Answer 3

Websockets 在这里无关紧要，我不明白你为什么要在循环内进行追加。尝试执行此类操作时，您需要使用选择器，该$(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);
})

最后，追加到正确的<div>.

.appendTo(Item.list);