Ajax Talk - Asynchronous javascript and xml discussion board
 FAQ   Search    Usergroups      Register   Profile   Check your messages   Log in 
Signup now to enjoy a range of free membership advantages !!
Ajax Talk - Moderators Wanted
help me understanding auto suggest

Post new topic   Reply to topic    Ajaxtalk.com Forum Index -> AJAX Help
View previous topic :: View next topic  
Author Message
New one
New one

Joined: 08 Jan 2008
Posts: 1

PostPosted: Tue Jan 08, 2008 5:11 am    Post subject: help me understanding auto suggest Reply with quote

hi experts,
i am eager to understand how google-like auto-suggest works, but "html-code-wise"
i mean, does it use <select> or what?
you know, on keyup, a section appears under the text box, and it lists the suggestions.
then, user can just push the down arrow and the cursor will go to the first suggestion.

to me, it looks like a <select>. i am guessing, on keyup, i make the <select> visible, and then i focus() it.
but, it will take the focus from the textbox away, and user can't type more letters without re-focus to the textbox.

if i use <div> to display the suggestions instead of <select> it can't be selected using down arrow.

i have found many ready-to-use script to solve my problem, but i just want to know what html element it uses. curious curious curious... Razz

please help. thank you in advance.
below is my attempt as explained above.


<input type="text"
         onkeyup="document.getElementById('a').style.display='block'; document.getElementById('a').focus();"
<select id="a" multiple="2" style="display:none;">
    <option style="display:block; width:100px; height:25px; color:blue;">a<b>b</b>c</option>
    <option style="display:block; width:100px; height:25px; color:blue;"><b>a</b><u>b</u>c</option>
Back to top
View user's profile Send private message
Light Frequent Poster
Light Frequent Poster

Joined: 07 Sep 2007
Posts: 7

PostPosted: Tue Jan 08, 2008 5:12 pm    Post subject: Reply with quote

It's definitely not a select, but rather a div.

The whole down arrow is actually more script coding that moves through the result array as you hit the down or up keys.

each key on a keyboard returns a specific keyCode -
What you could do is build the suggestion array, then depending if they're going up or down, increment the index of the array.
Visually you will have to highlight the different results in the div.

That's just my .2cents -

I tried to use google's auto-suggest but for some reason it wasn't working.
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Ajaxtalk.com Forum Index -> AJAX Help All times are GMT
Page 1 of 1

Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
 XML & Copyright Notice 

Powered by phpBB © 2001, 2005 phpBB Group

What is according to Wikipedia: Ajax Web2.0 XML E4X

Link to our site:


del.icio.us digg spurl wists simpy newsvine blinklist furl blogmarks yahoo! myweb smarking ma.gnolia segnalo reddit fark technorati cosmos

Normal Bookmark

Partner Button Links:
Codecrunch.com: Webmaster Tutorials    One Ajax

Partner Text Links:
quomon | web20log | ajaxmatters | tableless | 456bereastreet | music charts | gift ideas | competitions | free xbox 360 | link trade ?

it consultancy & project management lead generation zoekmachine optimalisatie steal these buttons seo expert