Auto complete down arrow not working

Rails
1

Hi all,
i was using auto complete feature in my rails app, when i used to type a
character it responds very well and displays all the items match with
that character.

and now the thing is when i try to select any item from the list using
my keyboard down (or) up arrrow, its not working in IE 7 and forced to
use mouse at this point, but works pretty good in FF and also works fine
when selected with mouse

and my code is :

Code : ruby - fold - unfold

  2.     <%= my_text_field_with_auto_complete :article, :title,

    3. {:index => ha.id, :class => “text”, :value => ha.article_title},
    {:skip_style => true} %>
    3.
    4.


5.
6. #partial for list:
7.

    8. <% @articles.each do |article| %>
    9.
  • <%= article.title %>

    • 10. <% end %>
    11.

12.
13.
14. #controller:
15. def auto_complete_for_article_title
16. article_index = params[:article].keys[0] # get index as its
always only one at a time
17.
auto_complete_responder_for_article_title(params[:article][article_index][:title])
18. end
19.
20. def auto_complete_responder_for_article_title(value)
21. @articles = Article.find_by_sql(“select title from articles
where title like ‘%#{value}%’”)
22. render :partial =>
‘/resources/homepages/article_auto_complete_list’, :layout => false
23. end

any suggestions !!
thanks in advance .

2

suspect that could be a css problem. The drop down may be visible but
perhaps not accessible because of the state of the surrounding div.
If the probelem were occuring in firefox, you could play around with
the css in firebug, but in IE it is less easy. Try making the div
containing the lookup position: relative; and see what happens. Or
for test purposes, move the autocomplete to another page element and
gradually work it back to where you want it.

Tonypm

3

Hi Tonypm thanks for ur Reply,

i have autocomplete css like this :
Where should i add style position: relative; in my CSS
plz help me, i want this to work in IE

div.auto_complete {
width: 350px;
background: #fff;
z-index: 100;
}
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;
}

thanks in advance !!!