Ajax auto-complete, with bespoke popup location

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

Can you change the CSS of the popup and assign negative values to margin-top? That should move the content to the top, but your results will look a little weird as the relevant values will be on the top.

Wouldn't it also be possible to edit the autocomplete plugin to edit the style of the container and move the location of the box? I don't think it would be too difficult, but I haven't seen that plugin in a while.

<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div>

You'd need to adjust this in the plugin code.

Edit: I actually wouldn't recommend this. There should be a way to reverse the result order in the UI plugin. Do that, and change the style values, and you should have a clean looking result set. I'll add the exact code when I get a chance

Answer 2

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