Text field autocomplete

Problem
You probably had to use the graceful work of controls with the ability to autofill. You know for sure that if you just start entering data, the application, even before the completion of the input, will begin dynamic matching. It was the most impressive squeak of fashion in the nineties of the last century.
For a new, stunning application, it is quite natural to want to create a stylish search.


Solution

Rails has a surprisingly easy-to-use autocomplete control that is part of the script.aculo.us JavaScript library. With its help, 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 for creating tables is as follows:

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, a lot of code is not required for this:

<% = 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 forms of HTML, without explaining that there is no fancy insertion. This can be so annoying that I want to draw your attention to the following slogan:
DO NOT FORGET TO INCLUDE JAVASCRIPT FILES IN THE CODE!

Now that the magic spells are included in the code, we can call 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 box with all the necessary JavaScript attachments. Like most other Rails helpers, the text_field_with_auto_complete () method does not contain anything that could not be done on its own.
But if you ever had to attach JavaScript event processing to HTML elements, you will understand what helpers really bring.
Everything that the client types is connected to JavaScript code, which monitors the text field and, as the user types the text in the browser, sends requests to the server. And one more, final, ingredient - you need to tell the server what to do when receiving these requests. Binding 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 one I painted on this topic) prescribes the dynamic generation of an action method called auto_complete_for_contact_name (), which will search for objects that match the entered text and send the results. In a browser, these results will fall into innerHTML, located in the <a> element of DHTML autocomplete, creating an attractive pop-up effect.

Crosspost from my blog