When using Ruby on Rails Form Helpers, it could be useful to add an autocomplete feature to fields where users might reuse data. An example of this might be a field where it’s likely that a user will reuse an email they used elsewhere in the application. One way this can be accomplished is by using Selectize.js to create a dropdown and populate it with data from the user model.

Setting up Selectize.js

To get started, you need to clone the appropriate files from the Selectize.js repository and add them to the vendor/assets/javascripts directory in your project. Once it is added, we can use the class name, email-autocomplete, to add Selectize.js to the field in CoffeeScript.

app/views/edit.html.erb

<%= f.text_field :email, class: "email-autocomplete" %>

app/assets/javascripts/forms.js.coffee

$(“.email-autocomplete”).selectize(options)

There are many possible options to customize your autocomplete field. Some of these include how many dropdown options are displayed, the HTML for each element, and what fields to search by. It also allows you to specify if the user can create new items. An example of these options would be:

options = {
    maxOptions: 3
    render:
        item: (item, escape) ->
            return "<div class='email-item'><span>#{escape(item.email)}</span></div>"
        option: (item, escape) ->
            return "<div class='email-item'><span>#{escape(item.email)}</span></div>"
    valueField: ‘email’
    searchField: ‘email’
    create: true
}

Dropdown Data

This is all great, but currently there is nothing populating the dropdown. To do this we will return to the view and add the data to the HTML.

<%= form_for @user, html: { data: { account_emails: @user.email_addresses.join(",") } } do |form| %>

From there, we can add the data to the .selectize() options:

options = {
    …
    onInitialize: ->
        emails = this.$input.parents("form").data("account-emails").split(",")

        for email in emails
            this.addOption({email: email})
}

And now you have a nice looking autocomplete dropdown!

Conclusion

There are many things that can be accomplished with Selectize.js. In addition to the variety of options available, there are also plugins that can add functionality like a delete button, or the ability to drag and reorder items. This makes it highly customizable for use in your Rails application, enhancing your user’s experience.