Hotwire Combobox 开源项目教程

最新推荐文章于 2024-09-15 08:21:37 发布

俞凯润

最新推荐文章于 2024-09-15 08:21:37 发布

阅读量628

点赞数 8

本文链接：https://blog.csdn.net/gitblog_00861/article/details/142191935

版权

Hotwire Combobox 开源项目教程

hotwire_combobox An accessible autocomplete for Ruby on Rails. 项目地址: https://gitcode.com/gh_mirrors/ho/hotwire_combobox

1. 项目介绍

Hotwire Combobox 是一个为 Ruby on Rails 应用程序设计的组合框（也称为自动完成）gem。它利用了 Turbo 和 Stimulus 技术，使得在 Rails 应用中快速集成自动完成功能变得非常简单。该项目目前处于早期开发阶段，即将进入 beta 版本，但 API 可能会有所变化，且可能存在一些 bug。建议用户继续使用并报告任何问题。

2. 项目快速启动

安装步骤

确保 Turbo 和 Stimulus 已配置并运行：在开始之前，确保你的 Rails 应用中已经配置并运行了 Turbo 和 Stimulus。
添加 Gem 到 Gemfile：在你的应用的 Gemfile 中添加以下行，并运行 bundle install：
```
gem "hotwire_combobox"
```
配置 JS 和 CSS：
- JS 配置：根据你的应用是否使用 importmaps 或 JS 打包工具（如 esbuild、rollup 等），进行相应的配置。
  
  Importmaps：在 app/javascript/controllers/index.js 中添加以下内容：
```
import { application } from "controllers/application";
import HwComboboxController from "controllers/hw_combobox_controller";
application.register("hw-combobox", HwComboboxController);
```
  JS 打包工具：首先，通过 npm 或 yarn 安装 JS 部分：
```
yarn add @josefarias/hotwire_combobox
# 或
npm install @josefarias/hotwire_combobox
```
  然后在 app/javascript/controllers/index.js 中注册 Stimulus 控制器：
```
import { application } from "controllers/application";
import HwComboboxController from "@josefarias/hotwire_combobox";
application.register("hw-combobox", HwComboboxController);
```
- CSS 配置：添加默认样式到你的布局文件中（通常是 app/views/layouts/application.html.erb）：
```
<%= combobox_style_tag %>
```

示例代码

以下是一个简单的自动完成组合框示例：

模板文件：

<%= form_with url: search_url do |form| %>
  <%= form.combobox :search, searchables_path, name_when_new: :search, mobile_at: "0px" %>
<% end %>

控制器文件：

class SearchablesController < ApplicationController
  def index
    @searchables = Searchable.search(params[:q])
    render turbo_stream: helpers.async_combobox_options(@searchables)
  end
end