Question

I’m doing something that involves ajax auto-completion of phrases in a <textarea>. I’ve got this working well using the jquery autocomplete plugin; however, it is hard-coded into this to position the popup below the <textarea>.

For what I’m working on, the <textarea> is at the bottom of the page; I ideally want the options to appear above the <textarea>.

Is there a similar existing (and half-decent) autocomplete script that would allow this? My other options are:

• try to reposition it after-the-fact using more jquery
• hack the plugin code to pieces to reposition it
• write something from scratch (sounds simple, but there are a few nuances in a decent autocomplete)

Suggestions?

---

For info, here’s what I ended up with:

#known-parent .ac_results 
{
    position: fixed !important;
    top: auto !important;
    bottom: 80px !important;
}

Answer 1

It’s not the cleanest solution in the world, but you can overwrite the style properties that the autocomplete plugin writes by using “!important” in your css.

Styles belong in CSS as much as possible anyways.

If I remember correctly, the plugin sets the “top” value in the “style” attribute of the autosuggest div.

In your css you should be able to just do:

#whatever_the_id_of_the_box_is {
    position: absolute !important;
    top: {{ whatever value you want here }} !important;
}