«

Hi All

I'm a newbie to javascript.
I had a textbox in my webpage.when i try to type something then a list
of matching values should be dispalyed underneath the textbox.
I can provide the list of values thru an array
my requirement seems something like the functionality in the following
site

http://www.google.com/webhp?complete=1&hl=en

Thanks & Regards
Kalyan

kalyan wrote:
> Hi All
>
> I'm a newbie to javascript.
> I had a textbox in my webpage.when i try to type something then a list
> of matching values should be dispalyed underneath the textbox.
> I can provide the list of values thru an array
> my requirement seems something like the functionality in the following
> site
>
> http://www.google.com/webhp?complete=1&hl=en
>
> Thanks & Regards
> Kalyan
>

Markup (adapt to SGML if XHTML doesn't fit your needs):

<input type="text" id="MyTextBox" />
<!-- absolute position removes it from document flow -->
<select id="MySelect" style="position:absolute">
</select>


Script:

//minimum number of characters to activate autocomplete
var MIN_TEXT_LENGTH = 3;

var MyPossibleValues = ['Lorem', 'LoremTest', 'Ipsum', 'IpsumTest'];

document.getElementById("MyTextBox").onkeypress = function()
{
if(this.value.length < MIN_TEXT_LENGTH)
return;

var selectBox = document.getElementById("MySelect");


//clear select box
while(selectBox.childNodes.length > 0)
selectBox.removeChild(selectBox.childNodes[0]);

//check beginning of each possible value against text box
//case insensitive
for(var i = 0; i < MyPossibleValues.length; i++)
{
if(MyPossibleValues[i].substring(
0, this.value.length).toLowerCase() ==
this.value.toLowerCase())
{
//this option matched
//add it to the select box

var option = document.createElement("option");
option.appendChild(
document.createTextNode(
MyPossibleValues[i]));

selectBox.appendChild(option);
}
}

//make select box expand to fit all the options
//without scrolling
selectBox.size = selectBox.childNodes.length;
}



If you want the select box to change the text box you'll have to add
additional logic for that.

This code is just an example. I didn't even test it and it's probably
riddled with errors and typos.

Jeremy