DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Search Autocomplete Stimulus
thomasvanholder
thomasvanholder

Posted on

Search Autocomplete Stimulus

Orginally published at Medium on Feb 21st 2020.

Learn how to set-up a search autocomplete with Stimulus. A user can see query results after typing in the input field. The Stimulus Autocomplete library is a Stimulus controller that provides an easy solution to auto-completion.

Autocomplete gif

  1. Install package
  2. Import library
  3. Add-basic-HTML-layout
  4. Create route
  5. Create controller method
  6. Create results view

Before you start

Make sure you have Stimulus installed. Check the package.json file or run yarn why stimulus. If Stimulus is not yet installed, follow the documentation.

1. Install package

Add stimulus autocomplete to your project:
yarn add stimulus-autocomplete


2. Import library

Add to the index.js file

import { Application } from "stimulus"
import { Autocomplete } from "stimulus-autocomplete"

const application = Application.start()
application.register("autocomplete", Autocomplete)
Enter fullscreen mode Exit fullscreen mode

3. Add basic HTML layout

<div class="max-w-xs mx auto bg-white">

  <div data-controller="autocomplete" data-autocomplete-url-value="/autocomplete">
    <input type="text" class="w-full" data-autocomplete-target="input" placeholder="Type to search..."/>
    <ul data-autocomplete-target="results"></ul>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Let’s add a wrapper around to narrow the input field and search results.

  • data-controller=”autocomplete" scopes the imported controller to the div
  • data-autocomplete-url-value sets the route to get the search results from
  • data-autocomplete-target=”input” listens for a keyboard change and reads the input field
  • data-autocomplete-target=”results” is the wrapper to inject the result list items in

4. Create route

get '/autocomplete' , to: 'products#autocomplete'
Enter fullscreen mode Exit fullscreen mode

Fetch the HTML search results that should be displayed at the user types

5. Create controller method

def autocomplete
  @search_results = ["apple", "apple juice", "apple compote"]
  render layout: false
end
Enter fullscreen mode Exit fullscreen mode

Layout false ensures that only plain HTML is returned. The header and metadata are not included. Precisely what is needed as the search results should display text only.

6. Create results view

<% @search_results.each do |result| %>
  <li role="option"><%= result %></li>
<% end %>
Enter fullscreen mode Exit fullscreen mode

Display the search results in a HTML view that matches the created route
products/_autocomplete.html.erb

Conclusion

Stimulus proves it value by sprinkling JavaScript on the page, without the need for much custom JavaScript. Leverage pre-build components and suddenly developers can easily bring interactivity to HTML-dominant web applications.

Top comments (1)

Collapse
nicolrx profile image
nico_lrx

Thank you for your tutorial, really easy to go through!

Just for information, with Rails 6, I had to change the render layout: false by render partial: 'partial_name', formats: :html

🌚 Life is too short to browse without dark mode