Rails 4 Autocomplete Form


I am trying to implement an autocomplete form in my rails application.

So far I have gone through the following installation steps.

Gemfile added:

gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'rails4-autocomplete'

Application.js added:

//= require jquery
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require autocomplete-rails

In my models, I have a Job and a Company. A Job belongs_to Company and a Company has_many Jobs.

In my routes.rb I have:

resources :companies
resources :jobs do
  get :autocomplete_company_name, :on => :collection

Jobs controller added to top:

autocomplete :company, :name

All a Job consists of is a Date, and then foreign keys to tables such as Company, Contact, Jobsite, etc. On the Jobs new _form I have:

<%= form_for(@job) do |f| %>
   <%= f.hidden_field :date, :value=>Time.now %>
   <%= f.hidden_field :user_id, :value=>current_user.id %>

   <%= f.fields_for :company, @company do |company| %>
      <%= company.autocomplete_field :name, autocomplete_company_name_jobs_path %>

I am able to render the autocomplete field on my form, but when i start typing, nothing comes up. Home Depot is one of my dummy companies in my test database, but you can see when i type "Ho" nothing appears to autocomplete.

enter image description here

The page source for the autocomplete field i am rendering appears like so:

<input data-autocomplete="/jobs/autocomplete_company_name" type="text" name="job[company][name]" id="job_company_name" />

I have been following the documentation and instructions found here: https://github.com/bigtunacan/rails-jquery-autocomplete

Is there something I am missing? Such as some javascript files I am not including or a script/function I need to be running in my application.js? Or a javascript_include_tag in my application.html?

I am new to using jQuery and javascript.


After searching online for more examples, I found the answer.

First, I was slightly off. The autocomplete :company, :name needed to be in my Company Controller, and the get :autocomplete_company_name, :on => :collection needed to be nested in my companies resources.

I don't know why their documentation for their Gem would be missing this, but, in order to make the gem work I had to create my own js.erb file and add a javascript function.

In app/assets/javascripts I created company.js.erb and added the following function:

$(function() {
    var companies = <%Company.all.collect{|company| company.name}%>
    $( "#jobCompany" ).autocomplete({
      source: companies

That was all that was missing and once I restored the server everything was working as it should.

Note, if you want to have the autocomplete suggestion be formatted nicely, then in the app/assets/stylesheets/application.scss add *= require jquery-ui

If you want to store the images on a remote system, then you indeed do need some way to transfer them. Specifically that means you need to setup and operate a server and you need to use a client to trigger the actual transfers. This limits your possible choices to those client implementations available on your wen hosting platform.

FTP is such a protocol, to use it you would obviously need a FTP server. However the issue with FTP is that it is a dinosaur from an area long gone. It is a left over from the 1970th. Totally outdated. It was designed for a network topology that had completely different challenges than todays internet. And indeed it does create a lot of issues. First, it does not encrypt the transferred data. That is a huge privacy issue, obviously. There are indeed versions these days that offer encryption. However that protocol variant, called FTPS, only encrypts the communication channel, whilst all other channels, all those used to transfer the actual files, stay not encrypted. The second big issue with that protocol is that it requires quite some effort for the firewall setup. It opens a separate network connection for each transfer which is inefficient. Separate ports are expected to be open towards the internet. A nightmare for firewall administrators. And it might even be that the protocol cannot be used in some situations, for example it is nearly impossible to use FTP in combination with port forwarding scenarios. That is why FTP is not really a good choice for what you plan in my eyes. Though indeed it still is in wide spread use these days.

An immediate alternative is the "modern drop in replacement", the SFTP protocol. Though called similar and indeed serving exactly the same purpose, it is a completely separate protocol from a technical point of view. It operates based on the secure shell protocol (SSH) for which servers are also wide spread and proven. It offers strong encryption, offers means for all activities required for the task at hand and is much easier to configure with look on the network setup. All traffic, so control and payload traffic is sent though a single network connection. Most implementations are developed as Open Source project with all the benefits in security and fast reaction on potential issues that come up. Another plus: it allows authentication based on asymmetric key pairs instead of passwords which further raises the security. This protocol is my personal choice. Also because you need to operate an ssh server anyway to manage your systems. This keeps the footprint small ;-)

There are further alternatives like WEBDAVS for example. But they are less well known, less easy to setup. Which is why I would recommend against such experiments, except if there are very specific reasons.

A last option are network shares. That allows to treat file transfer between systems like local file operations which obviously is a big plus. Such connections can be encrypted, but are not really designed for long distance communication. So this depends a bit on your specific situation. Typical choices here would be NFS or SMB/CIFS (Samba). Probably also some newer "distributed file systems" might be usable. But I cannot say much about those due to lack of personal experience ;-) The biggest issue I see with this option is that it requires privileged access to the client system (so your web hosting platform), since you have to mount the share into the local file system, be it on system or on user level. This typically is not possible in cheap web hosting scenarios.

By : arkascha

You can use Array.prototype.includes, which checks if the array includes the value. Note that this is not supported on Internet Explorer, you can find the polyfill at the mentioned link. Per the documentation:


The includes() method determines whether an array includes a certain element, returning true or false as appropriate.

if(myArray.includes(x)) {
    //x is in myArray

If you want the position, you may use indexOf:


This will search for item and return the position. If not found, it will return -1. This can be applied to work with IE:

if(myArray.indexOf(x) > -1) {
    //x is in myArray

This makes sure it exists because it checks if the position is greater than -1.

By : Andrew L.

This video can help you solving your question :)
By: admin