JavaScript Autosuggest Question

Question

I am trying to program a JavaScript Autosuggest. I was wondering the best way to get a list box to appear under the text box. For example, if the text box is a list of states, and I type "O" in the text box, it should list Ohio, Oklahoma, and Oregon in a list below the text box. The list should only appear if there are matches. It should be aligned with the text box and be exactly under it. When it appears, it shouldn't move the input fields below it down.

I was trying to do this with a div that is hidden, and then is shown when the onkeypress event of the textbox occurs. However, I couldn't get it lined up under the textbox, and it was pushing the other input fields below it down.

Answer 1

I believe that you might have trouble with your Z-Index. Change the value for the div to appear ABOVE other elements.

Good luck!

Answer 2

okay this is a tiny bit tricky.

the hidden div should be like this.

<div style="position:relative">

<div style="position:absolute;display:none" id="search_results"></div>

</div>

absolute position will make div show over the other form elements, without them moving down.

the relative position div one higher will make your absolute positioned div show up in the right place.

theCowboyCoder