Autocomplete text field

Problem
You probably had to use the elegant work of controls that have the property auto-complete. You know for sure that one has only to begin data entry, as the application, before the completion of the input, will begin the dynamic selection of matches. It was the most impressive fashion in the nineties of the last century.
For a new, stunning application, it’s quite natural to want to create a stylish search.


Decision

Rails has an amazingly easy-to-use auto-complete control that is part of the script library script.aculo.us. With it, you can completely cope with the task and get an attractive, modern search field in less than ten lines of code.
Imagine that you have a contact book application and a desire to quickly search for a contact by name. Suppose that all the necessary database tables and model classes have already been created, and the Active Record migration to create tables looks like this:
')

class CreateContacts <ActiveRecord :: Migration
def self.up
create_table: contacts do | t |
t.column: name,: string
t.column: email ,: string
t.column: phone ,: string
t.column: address_line1,: string
t.column: address_line2 ,: string
t.column: city,: string
t.column: state ,: string
t.column: country,: string
t.column: postal_code,: string

t.timestamps
end
end

def self.down
drop_table: contacts
end
end
* This source code was highlighted with Source Code Highlighter .

Now let's create a new controller and view for the search:
Now, to create a new view for the search controller, let's edit the search.rhtml file, in which our trendy autocomplete will be implemented. As you can see, for this a lot of code is not required:

<% = javascript_include_tag: defaults%>
<% = text_field_with_auto_complete: contact,: name%>
* This source code was highlighted with Source Code Highlighter .

The first thing that catches your eye is the line at the very beginning of the code with the contents of javascript_include_tag: defaults. It’s easy to forget about this line, and then it’s much harder to understand what happened. This line includes JavaScript files that implement Rails-Ajax magic. Without it, depending on the type of browser used, something will be displayed, starting with cryptic error messages and ending with lifeless HTML forms, without explaining that there is no fancy insert. This can cause so much irritation that I want to draw your attention to the following slogan:
DO NOT FORGET TO INCLUDE JAVASCRIPT FILES IN THE CODE!

Now that magic spells are included in the code, we can trigger them:

<% = text_field_with_auto_complete: contact,: name%>
* This source code was highlighted with Source Code Highlighter .

This will cause Rails to create a text field with all the necessary JavaScript attachments. Just like most other Rails helpers, the text_field_with_auto_complete () method does not contain anything that you couldn’t do on your own.
But if you’ve ever had to attach JavaScript event handling to HTML elements, you’ll understand the real value of helpers.
Everything that the client dials is connected to the JavaScript code that monitors the text field and, as the user types in the browser, sends requests to the server. And one more, the final ingredient - you need to tell the server what to do when you receive these requests. Linking client requests to the application model is very trivial. It is implemented by two lines included in the SearchController:

class SearchController <ApplicationController
protect_from_forgery: only => [: create ,: delete ,: update]
auto_complete_for: contact ,: name
... This source code was highlighted with Source Code Highlighter .

The second line of Rails (the first I painted on this topic) prescribes the dynamic generation of an action method called auto_complete_for_contact_name (), which will search for objects matching the entered text and send the results. In the browser, these results will fall into the innerHTML located in the <am> element of the DHTML autocomplete, creating an attractive pop-up effect.

Crosspost from my blog