# Auto Complete Problems

**URL:** <https://www.ruby-forum.com/t/auto-complete-problems/133833>\
**Category:** Rails\
**Created:** [April 4, 2008, 4:49am UTC](https://www.ruby-forum.com/t/auto-complete-problems/133833 "2008-04-04T04:49:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pens\_fan](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/cdc98d/32.png) [@pens\_fan](https://www.ruby-forum.com/u/pens_fan)\
**Post date:** [April 4, 2008, 4:49am UTC](https://www.ruby-forum.com/t/auto-complete-problems/133833/1 "2008-04-04T04:49:50Z")

</div>

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 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:

City:&nbsp; \<%= text\_field\_with\_auto\_complete :agent, :city, :skip\_style =\> true %\>

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:

 Braintray 

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

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

```

# Braintray

| 

| Home  
[New Agent](https://www.ruby-forum.com/agent/new)  
[New Listing](https://www.ruby-forum.com/listing/new)  
[Show Agents](https://www.ruby-forum.com/agent/list)  

```
  <a href="/listing/list">Show Listings</a><br />
</td>
</tr>
</table>

```

 | 

| 
# New Agent

```
<td class="col-2" valign="top"><input id="agent_first_name"

```

name=“agent[first\_name]” size=“30” type=“text” /\>

```
<td class="col-2" valign="top"><input id="agent_home_phone"

```

name=“agent[home\_phone]” size=“30” type=“text” /\>

```
<td class="col-2" valign="top"><input id="agent_alternate_phone"

```

name=“agent[alternate\_phone]” size=“30” type=“text” /\>

```
<td class="col-2" valign="top"><input id="agent_website"

```

name=“agent[website]” size=“30” type=“text” /\>

| First Name:&nbsp; |
| Last Name:&nbsp; | |
| Home Phone:&nbsp; |
| Cell Phone:&nbsp; | |
| Alternate Phone:&nbsp; |
| Fax:&nbsp; | |
| Website:&nbsp; |
| Date:&nbsp; | ![Calendar](https://www.ruby-forum.com/images/calendar_date_select/calendar.gif?1206211205) |
| City:&nbsp; | 

```
  <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;
    }

```

  
 |
| |

```
</td>
</tr>
</table>

```

 |

 |

 |

---

<div class="post-metadata">

**Author:** ![pens\_fan](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/cdc98d/32.png) [@pens\_fan](https://www.ruby-forum.com/u/pens_fan)\
**Post date:** [April 4, 2008, 5:42am UTC](https://www.ruby-forum.com/t/auto-complete-problems/133833/2 "2008-04-04T05:42:07Z")

</div>

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/](http://sensei.zenunit.com/)

---

<div class="post-metadata">

**Author:** ![pens\_fan](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/cdc98d/32.png) [@pens\_fan](https://www.ruby-forum.com/u/pens_fan)\
**Post date:** [April 4, 2008, 1:29pm UTC](https://www.ruby-forum.com/t/auto-complete-problems/133833/3 "2008-04-04T13:29:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pens\_fan](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/cdc98d/32.png) [@pens\_fan](https://www.ruby-forum.com/u/pens_fan)\
**Post date:** [April 15, 2008, 3:26pm UTC](https://www.ruby-forum.com/t/auto-complete-problems/133833/4 "2008-04-15T15:26:39Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![pens\_fan](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/cdc98d/32.png) [@pens\_fan](https://www.ruby-forum.com/u/pens_fan)\
**Post date:** [April 4, 2008, 1:26pm UTC](https://www.ruby-forum.com/t/auto-complete-problems/133833/5 "2008-04-04T13:26:33Z")

</div>

Julian L. wrote:

Thanks for the input Julian. I’m not a newbie to web development, it’s  
what I do for a profession, and I have a degree in computer science.  
But this is my first time ever doing anything with RoR. I was getting  
frustrated and came here for help.

I’ll check out the Firefox DOM viewer you suggested, see if I can see  
anything in there.

Cheers.