将搜索结果附加到各自的父 div？答案

【问题标题】：Append search results to respective parent div?将搜索结果附加到各自的父 div？
【发布时间】：2018-07-09 23:13:15
【问题描述】：

我正在使用 webSocket 实现自动完成。当我输入具有类名item-search-results 的输入字段时，会显示一堆结果search results screenshot。我的问题是结果只会附加到第一个 item-search-results 输入字段。

但我需要将结果显示在右侧 item-search-results 输入字段下。比如我在第4个输入框输入item-search-results，结果却附加到第一个results are attach to the first row screenshot

这是我的 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);
    })
})

【问题讨论】：

我想这可能会有所帮助：api.jquery.com/closest
你必须使用 jquery 来做到这一点吗？使用一些前端框架，如 vue 或 react 会容易得多。
我尝试了最接近的但没有任何反应，结果甚至不会出现。 :(
我不能为这个项目使用任何框架@Guzz

标签： javascript jquery websocket

【解决方案1】：

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);

【讨论】：

为什么要使用varItem.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.log(value); });
好的，问题是你正在混合使用 javascript 和 jQuery。在这种情况下，您需要使用var。
我发布的内容不应该有任何语法错误。

【解决方案2】：

不确定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 输入字段。现在他们没有

【解决方案3】：

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

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

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

【讨论】：