Autocomplete your Rails Form using Selectize.js

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

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

<%= 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