Auto Complete Problems

Hello All,

I'm a RoR newbiew, trying to experiment with Autocomplete, but I'm
having some difficulties. When I start typing in my input box, instead
of getting a nice drop down, the styling on my page is getting all out
of wack (ie my background colours change, link styling changes, etc) and
I'm not seeing any autcompletion data. Here are the steps I've taken
with code snippets.

My <head> section:

<%= javascript_include_tag "scriptaculous/prototype" %>
<%= javascript_include_tag "scriptaculous/scriptaculous" %>
<%= javascript_include_tag "calendar_date_select/calendar_date_select"
%>
<%= stylesheet_link_tag 'style' %>

later on down, I have this:

<tr>
<td class="col-1" valign="top">City:&nbsp;</td>
<td class="col-2" valign="top">
<%= text_field_with_auto_complete :agent, :city, :skip_style => true %>
</td>
</tr>

In my agent_controller.rb, I have this:

auto_complete_for :agent, :city

I've put all of the scriptaculous .js files in my public dir in a folder
named scriptaculous. Am I supposed to be including some css files or
anything else? I'm kind of stumped here. Below is what my HTML looks
like for the full page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta name="generator" content="HTML Tidy, see www.w3.org" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Braintray</title>
  <!--
  <script src="/javascripts/prototype.js?1206058700"
type="text/javascript"></script>
<script src="/javascripts/effects.js?1206058700"
type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1206058700"
type="text/javascript"></script>
<script src="/javascripts/controls.js?1206058700"
type="text/javascript"></script>
<script src="/javascripts/widgets/tooltip.js?1206129032"
type="text/javascript"></script>
<script src="/javascripts/application.js?1206130840"
type="text/javascript"></script>
  -->
  <script src="/javascripts/scriptaculous/prototype.js?1199416034"
type="text/javascript"></script>
  <script src="/javascripts/scriptaculous/scriptaculous.js?1199416034"
type="text/javascript"></script>

  <script
src="/javascripts/calendar_date_select/calendar_date_select.js?1206211205"
type="text/javascript"></script>
  <link href="/stylesheets/style.css?1206124303" media="screen"
rel="stylesheet" type="text/css" />
  <script
src="/javascripts/calendar_date_select/calendar_date_select.js?1206211205"
type="text/javascript"></script>
<link href="/stylesheets/calendar_date_select/silver.css?1206211205"
media="screen" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="content">

  <div align="right">

    <strong>Logged in as ryan</strong><br />

    <a href="/logout">Logout</a>

  </div>

  <center>
  <h1>Braintray</h1>
  </center>

  <table width="100%">
  <tr>

  <td width="15%" valign="top">
    <table class="width100" align="center">
    <tr>
    <td>
      <a href="/">Home</a><br />
      <a href="/agent/new">New Agent</a><br />
      <a href="/listing/new">New Listing</a><br />
      <a href="/agent/list">Show Agents</a><br />

      <a href="/listing/list">Show Listings</a><br />
    </td>
    </tr>
    </table>
  </td>
  <td width="85%" valign="top">
    <table class="width100" align="center">
    <tr>
    <td>

<!-- begin page specific data -->
<center><h1>New Agent</h1></center>
<form action="/agent/create" enctype="multipart/form-data"
method="post"><div style="margin:0;padding:0"><input
name="authenticity_token" type="hidden"
value="a1e26185ba3062d1d2786a357322476eb3f8d3a9" /></div>
<table class="width50" align="left">

<!--begin form import-->

<!-- agent error messages -->

<!-- end error messages -->
<!--[form:profile]-->
  <tr>
    <td class="col-1" valign="top">First Name:&nbsp;</td>

    <td class="col-2" valign="top"><input id="agent_first_name"
name="agent[first_name]" size="30" type="text" /></td>
  </tr>
  <tr>
    <td class="col-1" valign="top">Last Name:&nbsp;</td>
    <td class="col-2" valign="top"><input id="agent_last_name"
name="agent[last_name]" size="30" type="text" /></td>
  </tr>
  <tr>
    <td class="col-1" valign="top">Home Phone:&nbsp;</td>

    <td class="col-2" valign="top"><input id="agent_home_phone"
name="agent[home_phone]" size="30" type="text" /></td>
  </tr>
  <tr>
    <td class="col-1" valign="top">Cell Phone:&nbsp;</td>
    <td class="col-2" valign="top"><input id="agent_cell_phone"
name="agent[cell_phone]" size="30" type="text" /></td>
  </tr>
  <tr>
    <td class="col-1" valign="top">Alternate Phone:&nbsp;</td>

    <td class="col-2" valign="top"><input id="agent_alternate_phone"
name="agent[alternate_phone]" size="30" type="text" /></td>
  </tr>
  <tr>
    <td class="col-1" valign="top">Fax:&nbsp;</td>
    <td class="col-2" valign="top"><input id="agent_fax"
name="agent[fax]" size="30" type="text" /></td>
  </tr>
  <tr>
    <td class="col-1" valign="top">Website:&nbsp;</td>

    <td class="col-2" valign="top"><input id="agent_website"
name="agent[website]" size="30" type="text" /></td>
  </tr>
  <tr>
    <td class="col-1" valign="top">Date:&nbsp;</td>
    <td class="col-2" valign="top"><input id="e_date" name="e_date"
type="text" /> <img alt="Calendar" onclick="new CalendarDateSelect(
$(this).previous(), {year_range:10} );"
src="/images/calendar_date_select/calendar.gif?1206211205"
style="border:0px; cursor:pointer;" /></td>
  </tr>
  <tr>
    <td class="col-1" valign="top">City:&nbsp;</td>
    <td class="col-2" valign="top">

      <style type="text/css"> div.auto_complete {
          width: 350px;
          background: #fff;
        }
        div.auto_complete ul {
          border:1px solid #888;
          margin:0;
          padding:0;
          width:100%;
          list-style-type:none;
        }
        div.auto_complete ul li {
          margin:0;
          padding:3px;
        }
        div.auto_complete ul li.selected {
          background-color: #ffb;
        }
        div.auto_complete ul strong.highlight {
          color: #800;
          margin:0;
          padding:0;
        }
</style><input id="agent_city" name="agent[city]" size="30"
skip_style="true" type="text" /><div class="auto_complete"
id="agent_city_auto_complete"></div><script type="text/javascript">
//<![CDATA[
var agent_city_auto_completer = new Ajax.Autocompleter('agent_city',
'agent_city_auto_complete', '/agent/auto_complete_for_agent_city', {})
//]]>
</script>
    </td>
  </tr>

<!--[eoform:profile]-->

<!--end form import-->
<tr>
<td><input name="commit" type="submit" value="Create" /></td>
</tr>

</table>
</form>

<!-- end page specific data -->

    </td>
    </tr>
    </table>
  </td>
  </tr>
  </table>
  </div>

</body>
</html>

Hey,

I'd suggest you don't thrust your hand directly into the gyrating plunger of joy that is AJAX straight away if you're a newbie.

It takes a while before you properly grok request/response, especially if you're not familiar with web development or even web site creation.

If you have your head around the request/response cycle, and params passing, and then you also have your head around basic AJAX using link_to_remote and observe_field types, etc, then THEN would be the time to try out autocomplete stuff.

It sits on top of the basic AJAX stuff, and does div reloading and database querying and makes a few assumptions that can be hard to "get". (For instance, the way it id-tags things from an HTML/CSS point of view.)

I'd also be using FireFox's lovely DOM viewer, because you can't simply view the source of a post-javascript-modified page and expect it to display the html for what appears on the page.

Good luck!

Julian.

Learn Ruby on Rails! CHECK OUT THE FREE VIDS (LIMITED TIME) VIDEO #3 OUT APRIL 6
http://sensei.zenunit.com/

I also forgot to mention, that the styling doesn't go all out of wack in
IE, only Firefox. IE doesn't do anything.

Hey Ryan,
I had the same problem...my guess (I'm still new to the whole rails
thing too) is that you're using RoR2.0 or something which is late
enough to include forgery protection. There are 2 ways I found to
'fix' this.
1. flip forgery protection off on a per AJAX method basis
  controller:
       protect_from_forgery :except => [
            :auto_complete_method1
            :auto_complete_method2 ]

2. Change the auto_complete plugin to include the forgery key when
making a javascript request. This requires that you patch the
auto_complete plugin.
http://dev.rubyonrails.org/attachment/ticket/10059/auto_complete_should_work_with_CSRF_and_be_testable_outside_a_project.patch
the meat is here for the forgery (CSRF) stuff...the other changes are
for the test harness:
auto_complete/lib/auto_complete_macros_helper.rb

Good luck,
Dale