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

Question

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

Answer 1

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

您可以将控制器附加到您的输入元素（或表单），并且该控制器将具有 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
    })
  }
}

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

Instant search external resource with params

stimulusjs