stimulusjs - 使用参数即时搜索外部资源

Question

从文本搜索加载查询结果的代码是什么样的？手册中有一个加载外部资源的例子，是不是就这么简单，只是将查询字符串附加到资源并捕获表单数据？我希望进行即时搜索，结果会随着每个输入事件而更新。由于某种原因，谷歌搜索即时搜索产生的示例也使用热连线的网络套接字部分，这是否有必要并且是否可以提高渲染性能？我希望 Turbo 在替换外部资源时不会简单地撕毁 dom。

Answer 1

我之前写过一个 Stimulus Controller 来做类似的事情。

您可以将 Controller 附加到输入元素(或表单)，并且该 Controller 将具有用于 change 事件的事件处理程序。像这样的事情:

// your.html
// <input type='text' data-controller="your_controller"/>

// your_controller.js
import { Controller } from "stimulus"
export default class extends Controller {

  connect() {
    this.element.addEventListener('change', (e) => {
      // execute a fetch request or something here
    })
  }
}