Fetch element to the right position

hello experts..
today i need your help with simple thing, i think.. :)
i to create element and make his position to the next element with code.
i want to create autocomplete class, i know jquery have one, but i want to create one on my own, just for practice, so i saw that if i have element on the middle or in the left side of the page or the top/bottom page it always fetch the suggestions to the right place, it looks like the web browser autocomplete..

now my question is... how do i do this with my class, i want that my code will create new element(ul) after the input, so for that i used jquery simple function
 .after("<ul></ul>")

Open in new window

that is simple, now how do i edit the css so it will look like real autocomplete like jquery or like the autocomplete on the web browsers.. i want it to looks real professional.

i managed to create some function that use % key but the problem is when i do zoom to the page. that looks real bad..
i know there is way that i can get the left position of the input element user .position() function that jquery have.

example(if the code were existed.):
<input type="text" id="txt" value="" />
<script>
var auto = new Autocomplete("txt"); //The Class
</script>

Open in new window

so that is basically what i want to do, simple create new class and in the class create function, he will calculate the position and create new ul element.

basically i want to match the list element perfectly to the input, in all positions(top left right bottom) all it's need.. :)

by the way, i want to say that i don't care how to do it, ajax, jquery, javascript, css - evrything is acceptable!! i just need to understand the code.. ;)

please help me, i want to make real nice class.. :)
if you don't understand my question please command, i try to explain my self better.. :)

thanks ahead...
LVL 3
Konstantin KrolikovAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Lukasz ChmielewskiCommented:
I'd recommend using the existing examples of the autocomplete and working with tutorials. Nothing explains better than an already-made example. Take a look at this ones:
http://www.nodstrum.com/2007/09/19/autocompleter/
http://www.switchonthecode.com/tutorials/jquery-tutorial-creating-an-autocomplete-input-textbox

Calculating the element position may vary in different browsers as they can be different by few pixels.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Konstantin KrolikovAuthor Commented:
doesn't help me.. sorry :(
0
Lukasz ChmielewskiCommented:
Do you want to make an autocomplete with the text box ? Give us an example of what you're trying to achieve.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Konstantin KrolikovAuthor Commented:
you know, like google autocomplete i just want to know how to design it, i know how to create the autocomplete but i have trouble with finding the position that i should give to the autocomplete list..
0
Lukasz ChmielewskiCommented:
0
Konstantin KrolikovAuthor Commented:
i need function that add the ul list in the right location - right location to the element(input) that i want to give him the autocomplete, this is fine, but still, not what i needed... :(
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.