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

Posted 2023-02-16

【中文标题】如何使用 websocket 实现自动完成？

【英文标题】：How to implement autocomplete with websocket?

【发布时间】：2018-07-09 17:39:06

【问题描述】：

这是我的第一个 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，我一次迈出一小步，所以我只想看看控制台中是否显示了任何东西（但最终，数据需要显示在网页中而不是控制台中）：

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。

非常感谢您的帮助。

【问题讨论】：

querySelectorAll 返回一个数组。

【参考方案1】：

querySelectorAll 返回一组具有类名 item-input 的元素节点。所以它不能附加 addEventListener。使用

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

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

替代方法是使用 id = 'item-input' 并使用 document.getElementById("item-input");

【参考方案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);
   )
)