urgent deliverable

Discussion in 'Javascript' started by kalyan, Oct 10, 2006.

  1. kalyan

    kalyan Guest

    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, Oct 10, 2006
    #1
    1. Advertising

  2. kalyan

    Jeremy Guest

    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.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));

    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
     
    Jeremy, Oct 11, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sachin Jagtap

    URGENT !! QUEUE STL PROBLEM URGENT!!

    Sachin Jagtap, Apr 28, 2005, in forum: C++
    Replies:
    4
    Views:
    1,055
    Mark Stijnman
    Apr 29, 2005
  2. Urgent Deliverable

    , Jan 2, 2006, in forum: ASP General
    Replies:
    2
    Views:
    150
  3. Urgent deliverable

    , Aug 28, 2006, in forum: ASP General
    Replies:
    7
    Views:
    149
    Bob Barrows [MVP]
    Aug 29, 2006
  4. Rob
    Replies:
    3
    Views:
    450
  5. Replies:
    1
    Views:
    278
Loading...

Share This Page