Question

我正在使用webSocket实现自动完成功能。当我输入具有类名//Thread N InterlockedOr(&vFlags, SomeNonZeroValue);的输入字段时，将显示一堆结果search results screenshot。我的问题是结果将仅附加到第一个item-search-results输入字段。

但是我需要将结果显示在右侧的item-search-results输入字段下。例如，我在第四个item-search-results输入字段中键入内容，但结果将附加到第一个results are attach to the first row screenshot

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

item-search-results

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-results div赋予不同的ID。但是您必须将其发送到websocket，然后将其接收回来，以调用要附加的正确ID。

Answer 3

Websocket在这里是无关紧要的，我不明白为什么要在循环中添加一个append。尝试执行此类操作时，您需要使用$(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);

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

3 个答案: