Text field autocomplete

    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.


    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


    def self.down
    drop_table: contacts
    * 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:

    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

    Also popular now: