help with selecting items in a list box

Discussion in 'Javascript' started by newcomer, Nov 24, 2004.

  1. newcomer

    newcomer Guest

    I have a javascript index that is similar to the one in the Windows
    help. It has a text field that allows the you to type text and it
    finds the closest item in the list below the text field. The list is
    simply a select element with options that looks like this:

    <SELECT>
    <OPTION VALUE="1">A
    <OPTION VALUE="2">B
    <OPTION VALUE="3">C
    </SELECT>

    My problem is when I have a large list, the closest entry selects the
    item in the list at the bottom of the list box, not the top of the
    list box.

    So here's the question: Is there a way to get the list box to display
    the selected item and move it to the top of the list and not just find
    it at the bottom?

    To get an idea of what I 'want' it to look like, in Windows, go to
    Help & Support (in XP it's in your start menu) and pick Index. I
    basically want it to mirror that functionality.
     
    newcomer, Nov 24, 2004
    #1
    1. Advertising

  2. newcomer wrote:

    > I have a javascript index that is similar to the one in the Windows
    > help. It has a text field that allows the you to type text and it
    > finds the closest item in the list below the text field.


    > So here's the question: Is there a way to get the list box to display
    > the selected item and move it to the top of the list and not just find
    > it at the bottom?



    <form action="foo" onsubmit="return false;">
    <script type="text/javascript">
    document.write(
    "<input type='text' name='search' onkeyup='S(this)'>"
    );
    </script>
    <select name="list" size="3">
    <option value="Batou" selected="selected">Batou</option>
    <option value="Bormer">Bormer</option>
    <option value="Ishikawa">Ishikawa</option>
    <option value="Major">Major</option>
    <option value="Pazu">Pazu</option>
    <option value="Tachikoma">Tachikoma</option>
    <option value="Togusa">Togusa</option>
    </select>
    </form>

    <script type="text/javascript">
    function S(oTxt){
    var oSel, size, text, value;

    oSel = oTxt.form.elements["list"];
    size = oSel.size;
    text = oTxt.value.toLowerCase();

    for(var ii=0, opt=oSel.options, n=opt.length; ii<n; ii++) {
    value = opt[ii].value.toLowerCase();
    if(value.indexOf(text)==0) {
    opt[ii+size<n?ii+size:n-1].selected=true;
    opt[ii].selected=true;
    break;
    }
    }
    }
    </script>
     
    Yann-Erwan Perio, Nov 24, 2004
    #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. Scott324
    Replies:
    3
    Views:
    4,515
    Jason Kester
    Oct 27, 2005
  2. Anjan Bhowmik
    Replies:
    1
    Views:
    497
    Misbah Arefin
    Feb 14, 2008
  3. mldardy
    Replies:
    1
    Views:
    766
    mldardy
    Dec 10, 2008
  4. Mark

    Selecting items in a list box

    Mark, Oct 31, 2003, in forum: Javascript
    Replies:
    0
    Views:
    133
  5. Brian
    Replies:
    4
    Views:
    375
    Joshie Surber
    Nov 19, 2005
Loading...

Share This Page