Pro component

Autocomplete Search Rails Components

Create delightful search experiences with intelligent autocomplete functionality. Features include debounced search, keyboard navigation, recent searches, and customizable styling.

Installation

1. Core Stimulus Controller Setup

The autocomplete system is modular! Start by adding the core controller, then add any extensions you need. This approach keeps each file smaller and more manageable.

Core Controller (Required)

This code is available to Pro users only.

// Hey curious person!
// You seem to be sneaking around the code...
// I hope you're enjoying the components!
// Have a great day!

class SecretMessage {
  constructor() {
    this.message = "Thanks for checking out Rails Blocks!";
    this.compliment = "You're awesome!";
  }

  reveal() {
    console.log(this.message);
    return this.compliment;
  }
}

const secret = new SecretMessage();
secret.reveal();

Extension Controllers (Optional)

Add these controllers only if you need their specific functionality:

For fuzzy search functionality (intelligent character matching):

This code is available to Pro users only.

// Hey curious person!
// You seem to be sneaking around the code...
// I hope you're enjoying the components!
// Have a great day!

class SecretMessage {
  constructor() {
    this.message = "Thanks for checking out Rails Blocks!";
    this.compliment = "You're awesome!";
  }

  reveal() {
    console.log(this.message);
    return this.compliment;
  }
}

const secret = new SecretMessage();
secret.reveal();

For recent searches functionality (localStorage-based search history):

This code is available to Pro users only.

// Hey curious person!
// You seem to be sneaking around the code...
// I hope you're enjoying the components!
// Have a great day!

class SecretMessage {
  constructor() {
    this.message = "Thanks for checking out Rails Blocks!";
    this.compliment = "You're awesome!";
  }

  reveal() {
    console.log(this.message);
    return this.compliment;
  }
}

const secret = new SecretMessage();
secret.reveal();

For hierarchical navigation functionality (folder-like drill-down with breadcrumbs):

This code is available to Pro users only.

// Hey curious person!
// You seem to be sneaking around the code...
// I hope you're enjoying the components!
// Have a great day!

class SecretMessage {
  constructor() {
    this.message = "Thanks for checking out Rails Blocks!";
    this.compliment = "You're awesome!";
  }

  reveal() {
    console.log(this.message);
    return this.compliment;
  }
}

const secret = new SecretMessage();
secret.reveal();

2. Floating UI Installation

The autocomplete component relies on Floating UI for intelligent tooltip positioning. Choose your preferred installation method:

pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.3/+esm"

Terminal

npm install @floating-ui/dom

Terminal

yarn add @floating-ui/dom

Examples

Basic Autocomplete

A simple autocomplete with local data filtering. Perfect for small datasets that don't require server requests.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

Remote API Autocomplete

Fetches suggestions from a remote API with loading states and debounced requests. Ideal for searching large datasets.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

This code is available to Pro users only.

# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!

class SecretMessage
  def initialize
    @message = "Thanks for checking out Rails Blocks!"
    @compliment = "You're awesome!"
  end

  def reveal
    puts @message
    @compliment
  end
end

secret = SecretMessage.new
secret.reveal

This code is available to Pro users only.

# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!

class SecretMessage
  def initialize
    @message = "Thanks for checking out Rails Blocks!"
    @compliment = "You're awesome!"
  end

  def reveal
    puts @message
    @compliment
  end
end

secret = SecretMessage.new
secret.reveal

Search on Focus

Show results immediately when the input gains focus. Perfect for pre-filled inputs or instant suggestions.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

Auto Fill

Change the text in the input when a suggestion is hovered or selected with the keyboard.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

Custom Icons and Badges

Create rich suggestions with custom icons and badges using HTML. Perfect for job boards, product catalogs, or any content requiring visual enhancement.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

Fuzzy Search

Fuzzy search on the client side. This is a good option for small datasets.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

Ruby-side Fuzzy Search

Fuzzy search on the server side. This is a good option for large datasets.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

This code is available to Pro users only.

# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!

class SecretMessage
  def initialize
    @message = "Thanks for checking out Rails Blocks!"
    @compliment = "You're awesome!"
  end

  def reveal
    puts @message
    @compliment
  end
end

secret = SecretMessage.new
secret.reveal

This code is available to Pro users only.

# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!

class SecretMessage
  def initialize
    @message = "Thanks for checking out Rails Blocks!"
    @compliment = "You're awesome!"
  end

  def reveal
    puts @message
    @compliment
  end
end

secret = SecretMessage.new
secret.reveal

YouTube-Style Search with Recent Searches

A full-featured search bar with recent searches, clear button, and YouTube-inspired styling. Stores search history in localStorage. Highlight matches in the search results are disabled.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

Navigate through a hierarchical data structure with keyboard or mouse navigation, which is useful for command palettes. There also is an optional breadcrumb.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

Free Solo Disabled

Disables users from entering arbitrary values that don't match any suggestions. When freeSolo is false, the input resets to empty when you click outside if no suggestion was selected.

This code is available to Pro users only.

<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Secret Message from Rails Blocks</title>
  <style>
    .secret-message {
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      padding: 2rem;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .wiggle { animation: wiggle 0.5s ease-in-out infinite; }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(1deg); }
      75% { transform: rotate(-1deg); }
    }
  </style>
</head>
<body>
  <div class="secret-message">
    <h1>🎉 Hello, Code Detective! 🕵️</h1>
    <p>Thanks for checking out Rails Blocks!</p>
    <p>You're clearly someone who pays attention to details.</p>
    <p>That's exactly the kind of developer we love!</p>

    <div class="cta-section">
      <button class="awesome-btn wiggle">You're awesome!</button>
      <p><small>Seriously, keep being curious! 🚀</small></p>
    </div>

    <footer>
      <p>Built with ❤️ by the Rails Blocks team</p>
      <p>Now go build something amazing!</p>
    </footer>
  </div>

  <script>
    console.log("🎊 Bonus points for opening the console!");
    console.log("Keep exploring and happy coding! 💻");
  </script>
</body>
</html>

Configuration

The autocomplete system is highly configurable through data attributes. The core controller provides the foundation, while extension controllers add specialized functionality.

Controller Values

Core Autocomplete Controller

These are the core configuration options available on the main autocomplete controller:

Value	Type	Default	Description
`data-autocomplete-url-value`	String	`null`	API endpoint for fetching suggestions from server
`data-autocomplete-min-length-value`	Number	`1`	Minimum characters before search triggers
`data-autocomplete-delay-value`	Number	`300`	Debounce delay in milliseconds for remote requests
`data-autocomplete-no-results-text-value`	String	`No results found`	Text displayed when no suggestions match
`data-autocomplete-loading-text-value`	String	`Searching...`	Text displayed during loading state
`data-autocomplete-separator-text-value`	String	`Search Results`	Text displayed in separator between local and remote results
`data-autocomplete-max-suggestions-value`	Number	`10`	Maximum number of suggestions to display
`data-autocomplete-local-data-value`	Array	`[]`	Array of data for client-side search (alternative to remote URL)
`data-autocomplete-search-keys-value`	Array	`["title","name","label"]`	Object properties to search in for local data

Value	Type	Default	Description
`data-autocomplete-highlight-matches-value`	Boolean	`true`	Highlight matching text in suggestions
`data-autocomplete-auto-fill-value`	Boolean	`false`	Automatically fill input with selected suggestion during keyboard navigation
`data-autocomplete-auto-select-first-value`	Boolean	`false`	Automatically select the first suggestion when user actively searches (not on focus/empty queries)
`data-autocomplete-submit-on-select-value`	Boolean	`true`	Submit form when a suggestion is selected
`data-autocomplete-search-on-focus-value`	Boolean	`false`	Trigger search when input gains focus (even if empty)
`data-autocomplete-match-strategy-value`	String	`contains`	How to match search queries against local data: 'prefix' (beginning), 'contains' (anywhere), 'exact' (exact match)
`data-autocomplete-clear-on-escape-value`	Boolean	`true`	Clear input when Escape key is pressed
`data-autocomplete-bubble-escape-value`	Boolean	`true`	Allow Escape key to bubble up to parent elements
`data-autocomplete-free-solo-value`	Boolean	`true`	Allow arbitrary values in input (when false, input resets on blur if no suggestion selected)

Value	Type	Default	Description
`data-autocomplete-placement-value`	String	`bottom-start`	Floating UI placement: top/bottom-start/end
`data-autocomplete-offset-distance-value`	Number	`8`	Distance in pixels between input and dropdown
`data-autocomplete-anchor-value`	String	`input`	Reference element for positioning: 'input' or 'form'
`data-autocomplete-render-mode-value`	String	`popover`	Rendering mode: 'popover' (floating) or 'inline' (static)
`data-autocomplete-always-show-value`	Boolean	`false`	Keep results container always visible (useful for command palettes)

Value	Type	Default	Description
`data-autocomplete-results-class-value`	String	`null`	CSS classes to override default results container styling
`data-autocomplete-suggestion-class-value`	String	`null`	Additional CSS classes to apply to each suggestion item

Value	Type	Default	Description
`data-autocomplete-close-on-select-value`	Boolean	`true`	Close dropdown when a suggestion is selected
`data-autocomplete-close-on-click-outside-value`	Boolean	`true`	Close dropdown when clicking outside the component
`data-autocomplete-preserve-search-on-select-value`	Boolean	`false`	Preserve search state when selecting suggestions with URLs (don't clear input or close dropdown)
`data-autocomplete-select-action-value`	String	`null`	Stimulus action to trigger on selection (e.g., "modal#close:prevent")

Extension Controllers

Extension controllers add specialized functionality to the base autocomplete controller. Include only the extension controllers you need:

How Extensions Work

• Override Behavior: Extension controllers can completely replace core functionality in their specialized domain

• Inheritance: Extensions can inherit core settings (like recent searches inheriting matchStrategy)

• Replacement: Some extensions replace core logic entirely (like fuzzy search replacing standard matching)

• Best Practice: Check each extension's documentation for which core settings it uses or ignores

Add intelligent character matching with autocomplete-fuzzy-search controller:

Important: Core Override Behavior

• Local Data: Fuzzy search completely replaces core matchStrategy for local data filtering

• Remote Data: Core matchStrategy is not used (fuzzy search doesn't apply to remote APIs)

• Recommendation: Don't set matchStrategy when using fuzzy search extension

Value	Type	Default	Description
`data-autocomplete-fuzzy-search-fuzzy-threshold-value`	Number	`0.1`	Minimum score for fuzzy matches (0-1, lower = more permissive)

Usage Example

data-controller="autocomplete autocomplete-fuzzy-search"

Add search history functionality with autocomplete-recent-searches controller. Stores user searches in localStorage and provides intelligent deduplication and filtering options:

Value	Type	Default	Description
`data-autocomplete-recent-searches-recent-storage-key-value`	String	`autocomplete-recent`	localStorage key for storing recent searches
`data-autocomplete-recent-searches-max-recent-items-value`	Number	`5`	Maximum number of recent searches to store
`data-autocomplete-recent-searches-deduplicate-value`	Boolean	`true`	Remove duplicate suggestions between recent searches and regular results
`data-autocomplete-recent-searches-show-recent-while-typing-value`	Boolean	`false`	Keep recent searches visible while typing (filtered by current input)
`data-autocomplete-recent-searches-recent-match-strategy-value`	String	`(inherits from core)`	How to match recent searches while typing: 'prefix', 'contains', or 'exact'. Empty string inherits from core matchStrategy

Match Strategy Examples

• prefix: "rails" matches "rails tutorial" but not "ruby on rails"

• contains: "rails" matches both "rails tutorial" and "ruby on rails"

• exact: "rails" only matches exactly "rails"

Strategy Inheritance

• Default Behavior: Recent searches inherit the core controller's matchStrategy

• Override: Set recentMatchStrategy to use a different strategy for recent searches

• Example: Core uses "prefix", recent searches can use "contains" for more flexible matching

Usage Example

data-controller="autocomplete autocomplete-recent-searches"

Add hierarchical navigation with autocomplete-navigation controller. Navigate through nested data structures like folders and files with optional breadcrumb navigation:

Value	Type	Default	Description
`data-autocomplete-navigation-breadcrumb-value`	Boolean	`false`	Enable breadcrumb navigation showing current path with clickable levels

Breadcrumb Features

• Visual Path: Shows current location in hierarchy (Home → Folder → Subfolder)

• Clickable Navigation: Click any breadcrumb level to jump back to that point

• Keyboard Support: Works with backspace navigation and clear button

• Auto-Updates: Breadcrumb updates automatically as you navigate

Usage Examples

Basic Navigation:
data-controller="autocomplete autocomplete-navigation"

With Breadcrumbs:
data-controller="autocomplete autocomplete-navigation" data-autocomplete-navigation-breadcrumb-value="true"

Breadcrumb Setup

When breadcrumbs are enabled, add a target element: data-autocomplete-navigation-target="breadcrumb"

Events

Event	Detail	Description
`autocomplete:select`	`{ value, data, path }`	Fired when a suggestion is selected
`autocomplete:submit`	`{ value }`	Fired before form submission

Data Properties Reference

Property	Type	Description
`title`	String	Primary display text (also accepts name, label)
`subtitle`	String	Secondary text (also accepts email, description)
`icon`	String	Built-in icon name (folder, file, settings, etc.)
`customIcon`	HTML	Custom icon HTML (overrides icon property)
`badge`	HTML	Custom badge HTML displayed next to title
`children`	Array	Child items for hierarchical navigation
`*`	Any	Custom properties for URL params and events

Animated Number

Autogrow

Get notified when
new components come out

Thanks for subscribing!

Autocomplete Search Rails Components

Installation

1. Core Stimulus Controller Setup

Core Controller (Required)

Extension Controllers (Optional)

Examples:

Important Notes

2. Floating UI Installation

Examples

Basic Autocomplete

Remote API Autocomplete

Search on Focus

Auto Fill

Custom Icons and Badges

Fuzzy Search

Ruby-side Fuzzy Search

YouTube-Style Search with Recent Searches

Autocomplete Navigation

Free Solo Disabled

Configuration

Controller Values

Core Autocomplete Controller

Extension Controllers

How Extensions Work

Important: Core Override Behavior

Usage Example

Match Strategy Examples

Strategy Inheritance

Usage Example

Breadcrumb Features

Usage Examples

Breadcrumb Setup

Events

Data Properties Reference

Table of contents

Get notified when new components come out

Thanks for subscribing!

Autocomplete Search Rails Components

Installation

1. Core Stimulus Controller Setup

Core Controller (Required)

Extension Controllers (Optional)

How to Use Multiple Controllers

Examples:

Important Notes

2. Floating UI Installation

Examples

Basic Autocomplete

Remote API Autocomplete

Search on Focus

Auto Fill

Custom Icons and Badges

Fuzzy Search

Ruby-side Fuzzy Search

YouTube-Style Search with Recent Searches

Autocomplete Navigation

Free Solo Disabled

Configuration

Controller Values

Core Autocomplete Controller

Extension Controllers

How Extensions Work

Important: Core Override Behavior

Usage Example

Match Strategy Examples

Strategy Inheritance

Usage Example

Breadcrumb Features

Usage Examples

Breadcrumb Setup

Events

Data Properties Reference

Table of contents

Get notified when new components come out

Thanks for subscribing!