如何使用websocket实现自动完成？

Question

这是我的第一个Web开发项目，我需要实现一个搜索类型的功能。要求是使用websocket。我从http://www.techbysample.com/2017/03/21/getting-started-with-websockets/下载文件来测试连接，我可以恢复数据。

Websocket testing screenshot

使用测试文件，当我在输入字段中键入{"type":"item","text":"bagel"}in然后单击“发送”按钮，我看到数据{"results":{"results":[{"id":1822,"name":"1 oz. Cream Cheese "},{"id":1821,"name":"1 oz. Cream Cheese - 36 COUNT"},{"id":2529,"name":"1% 1 Gallon"},{"id":2528,"name":"1% 1/2 Gallon"},

但是，在我的实际项目中，我没有任何按钮，我想在搜索字段中输入数据，这是在表格中的td内部。

<td>
   <input class="item-input" type="search" name="item" value="">
</td>

这就是我写的js，我一步一小步，所以我只想看看控制台中是否有任何显示（但最终，数据需要在网页中显示而不是控制台）：

let webSocket = new WebSocket("ws://localhost:8000/autocomplete") 

webSocket.onopen = (msgEvent) => {
    console.log('connected!');
  };
  webSocket.onmessage = (msgEvent) => {
    let results = JSON.parse(msgEvent.data);
    console.log(results);
  };
  webSocket.onclose = (msgEvent) => {
    console.log('disconnected');
  };
  webSocket.onerror = (msgEvent) => {
    console.log('there\'s an error');
  };

  /**
   *  Send Message
   */
  doSendMessage =() => {
      webSocket.send(msg.value);
      console.log(msg.value);
      msg.value = "";
  }

  let itemInput = document.querySelectorAll('.item-input');
  itemInput.addEventListener("input", (e) => {
    doSendMessage();
  });

但我得到以下错误：websocket_orders.js:26 Uncaught TypeError: itemInput.addEventListener is not a function(…)

我想知道如何实现此功能？使用vanilla js或jQuery。

非常感谢您的帮助。

Answer 1

querySelectorAll返回一组带有classname item-input的元素节点。所以它无法附加addEventListener。使用

let itemInput = document.querySelector('.item-input');

querySelector返回带有item-input的第一个元素。您可以将addEventListener附加到元素。

替代方法是使用id ='item-input'并使用document.getElementById（“item-input”）;

Answer 2

我把数据显示在控制台中。这就是我所做的：我使用了jQuery，并将函数绑定到.item-input到它所属的表。

$(function () {
  let webSocket = new WebSocket("ws://localhost:8000/autocomplete");
  webSocket.onopen = (msgEvent) => {
    console.log('connected!');
  };
  webSocket.onmessage = (msgEvent) => {
    let results = JSON.parse(msgEvent.data);
    console.log(results);
  };
  webSocket.onclose = (msgEvent) => {
    console.log('disconnected');
  };
  webSocket.onerror = (msgEvent) => {
    console.log('there\'s an error');
  };

  /**
   *  Send Message
   */
   $('.add-items-table').on('input', '.item-input', (e) => {
     let value = e.target.value;
     webSocket.send(value);
     console.log(value);
   })
})