Question

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

Websocket testing screenshot

使用测试文件，当我在输入字段中输入{"type":"item","text":"bagel"}然后单击“发送”按钮时，我会看到数据{"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，我每次只迈出一小步，所以我只想查看控制台中是否有任何内容（但最终，数据需要显示在网页中而不是控制台中）：< / p>

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(…)

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

非常感谢您的帮助。

Answer 1

我将数据显示在控制台中。这是我所做的：我使用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);
   })
})

Answer 2

querySelectorAll返回一组具有类名称item-input的元素节点。因此，它无法附加addEventListener。使用

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

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

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

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

2 个答案: