I keep forgetting how the advanced mode in this demo works, so I end up reviewing the source code every time I need to refresh my memory.

Definitely go through the README, but keep the following in mind:

  • Application_helper is the key. It contains setup_search_form that defines the various Javascript bindings.

  • In application.html.erb, note the following and review setup_search_form again if you missed the purpose of the yield:

    <script type="text/javascript">
     $(function() {
      <%= yield :document_ready %>
     });
    </script>

  • Review the partials in the users folder and click around the demo to see when each is called. You can modify how the dropdowns and other controls are presented using CSS and JS. If you change class names, modify the setup_search_form accordingly.

  • Lastly, the class names in setup_search_form is the same as cocoon’s! I recommend prepending ‘ransack’ to the HTML elements’ class names.

The only thing I haven’t done is create integration tests for my projects that use forms similar to the demo.