Rails应用中创建可搜索选择输入的可行方案，求非jQuery的Select2替代方案

我来分享几个在Rails项目里实现可搜索选择输入、且完全不用jQuery的靠谱方案，都是Select2的优质替代：

• Tom Select：这是Selectize的现代化分支，纯原生JavaScript实现，完全没有jQuery依赖，API设计和Select2很接近，上手成本很低。在Rails里可以直接通过yarn add tom-select安装，然后在你的JS打包文件（比如app/javascript/application.js）里导入并初始化：

  import TomSelect from 'tom-select';
  
  document.addEventListener('DOMContentLoaded', () => {
    // 针对单个选择器初始化
    new TomSelect('#product-category-select');
    // 如果要批量处理带特定类名的元素
    document.querySelectorAll('.searchable-select').forEach(el => new TomSelect(el));
  });
  

  它支持远程数据加载（完美适配从Rails后端接口拉取选项）、自定义选项模板、多选、标签创建等功能，完全能覆盖Select2的常用场景，而且体积比Select2小不少。

• Choices.js：同样是无任何依赖的原生JS库，体积超轻量，核心功能齐全，包括搜索过滤、多选、远程数据获取、自定义样式等。安装方式同样是yarn add choices.js，初始化代码示例：

  import Choices from 'choices.js';
  // 别忘了导入样式
  import 'choices.js/public/assets/styles/choices.min.css';
  
  document.addEventListener('DOMContentLoaded', () => {
    new Choices('#user-role-select', {
      searchEnabled: true,
      placeholderValue: '选择用户角色',
      maxItemCount: 3, // 限制多选数量
      removeItemButton: true
    });
  });
  

  它的文档非常清晰，样式自定义也很灵活，适合追求轻量化又需要完整功能的场景。

• HTML5原生datalist元素：如果你的需求只是基础的搜索提示，不需要复杂的多选、远程加载或自定义样式，HTML5原生的<datalist>就足够了，完全不需要引入任何额外库。在Rails erb表单里可以这么写：

  <%= form_with(model: post) do |form| %>
    <%= form.label :category %>
    <%= form.text_field :category, list: 'category-options', class: 'form-control' %>
    <datalist id="category-options">
      <% Category.all.each do |category| %>
        <option value="<%= category.name %>"><%= category.name %></option>
      <% end %>
    </datalist>
  <% end %>
  

  优点是零依赖、加载极快，缺点是样式自定义空间有限，也不支持多选等高级功能，适合简单需求场景。

• React Select：如果你的Rails项目已经集成了React，那么React Select是个非常强大的选择。它是纯React组件，无jQuery依赖，支持搜索过滤、远程数据加载、多选、自定义选项渲染等一系列高级功能。可以通过yarn add react-select安装，然后在React组件中使用：

  import Select from 'react-select';
  import { useState, useEffect } from 'react';
  
  const CategorySelect = () => {
    const [options, setOptions] = useState([]);
    const [inputValue, setInputValue] = useState('');
  
    // 根据输入值从Rails后端获取选项
    useEffect(() => {
      if (inputValue.length < 2) return;
      fetch(`/api/categories?query=${inputValue}`)
        .then(res => res.json())
        .then(data => setOptions(data.map(cat => ({ value: cat.id, label: cat.name }))));
    }, [inputValue]);
  
    return (
      <Select
        options={options}
        onInputChange={setInputValue}
        placeholder="搜索选择分类"
        isMulti // 开启多选
      />
    );
  };
  
  export default CategorySelect;
  

选择方案的时候可以根据你的功能需求、项目技术栈来决定：简单基础需求用原生datalist，中等功能需求选Tom Select或Choices.js，React技术栈优先考虑React Select。

内容的提问来源于stack exchange，提问作者Mirha Masala