Joined: 08 Jan 2008
|Posted: Tue Jan 08, 2008 5:11 am Post subject: help me understanding auto suggest
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...
please help. thank you in advance.
below is my attempt as explained above.
<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>
Light Frequent Poster
Joined: 07 Sep 2007
|Posted: Tue Jan 08, 2008 5:12 pm Post subject:
|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.