Autocomplete remote JSON datasource in Rails

I. Introduction:

JQuery UI's Autocomplete is a great choice to autocomplete remote JSON datasource in Rails.

This widget allows users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

Any field that can receive input can be converted into an Autocomplete. For example: namely, <input> elements, <textarea> elements, contenteditable attribute.

By entering something in to an Autocomplete field focus, the plugin starts searching for entries that match and displays a list of values to choose from.

Here a simple jQuery UI Autocomplete. The language's suggestion is displayed when clicking to the field, The suggestion comprises: c++, java, php, javascript, asp, ruby

= f.label :language
= f.text_field :language, id: "language"

:javascript
  $("#language").autocomplete( {
    source: ["c++", "java", "php", "javascript", "asp", "ruby"]
  } );

For more examples, you can check out here

In the next part, I'll show you how to pull data from a remote source with big data sets.

II. Demo:

Here the suggestions are bank name, displayed when at least one japanese characters are entered into the bank field. In this case, the datasource is the Bank Teraten webservice, a bank and branch code API.

After choosing a bank in the suggestions' list, the branches' list of the bank chosen will be listing in the next branch field.

Here the autocomplete form:

Gemfile

gem "jquery-ui-rails"

_form.html.haml

= f.label :bank
= f.text_field :bank, class: "form-control", id: "account_bank"

= f.label :branch
= f.text_field :branch, class: "form-control", id: "account_branch"

application.js

//= require jquery-ui/autocomplete
//= require ./account_users

applications.css.scss

@import "jquery-ui/autocomplete";

account_users.js.coffee

autocomplete = ->
  bank_code = undefined

  $("#account_bank").autocomplete
    source: (request, response) ->
      $.ajax
        url: "http://bank.teraren.com/banks/search.json"
        dataType: "json"
        data: name: request.term
        success: (data) ->
          response $.map(data, (item) ->
            {
              label: item.name
              code: item.code
            }
          )
    minLength: 1
    select: (event, ui) ->
      bank_code = ui.item.code

  $("#account_branch").autocomplete
    source: (request, response) ->
      $.ajax
        url: "http://bank.teraren.com/banks/" + bank_code + "/branches/search.json"
        dataType: "json"
        data: name: request.term
        success: (data) ->
          response $.map(data, (item) ->
            {
              label: item.name
            }
          )
    minLength: 1

III. Conclusion:

Autocomplete is an amazing and customizable plugins. Settings up the Autocomplete with Rails may be a little difficult at first, but once you familiar, it is quicly done.

Reference:

http://api.jqueryui.com/autocomplete/

https://github.com/joliss/jquery-ui-rails