www.webdeveloper.com
Results 1 to 5 of 5

Thread: how to filter the content of a list box based on a text box value

Hybrid View

  1. #1
    Join Date
    Mar 2013
    Posts
    6

    how to filter the content of a list box based on a text box value

    hi,

    i am developing a web page in which i have following elements

    1) a list box contains the list of files.
    2) a text box
    3) a button

    by default list box contains a list of files say

    Code:
    s1.txt2013
    s2.txt2013
    s3.txt2012
    s4.txt2012
    when the user enters a particular pattern in the text box say (2013) and clicks the button, then the list box contents should be filtered and the list box should only contain the files containing 2013 in its name

    so after user enters 2013 in text box and xlicks the button, the list box should now contain olny
    Code:
    s1.txt2013
    s2.txt2013

    so, can anyone tell me how can i do this.. please give me a code to do this.. its urgent need.

    thanks

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    where is the page code? is it a kind of top secret military documentation? what html tag the 'list box' stands for?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Mar 2013
    Posts
    6
    its a simple html page..

    <html>
    <head>
    <title>List box</title>
    </head>
    <body>
    <form id="frm1" name="frm1" action="" method="GET">
    <input type="text" name="pattern" id="pattern">
    <select id="lb" name="lb" size="5">
    <option value="s1.txt~2013">s1.txt~2013
    <option value="s2.txt~2013">s2.txt~2013
    <option value="s3.txt~2012">s3.txt~2012
    <option value="s4.txt~2012">s4.txt~2012
    </select><br>
    <input type="button" id="btn1" name="btn1" value="OK" onclick="get_options()">
    </form>
    </body>
    </html>
    and list box is a general name for html "select" tag.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    Quote Originally Posted by rahul1990 View Post
    ...and list box is a general name for html "select" tag.
    depends on where you live <wink>

    try this
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>123</title>
    <title>List box</title>
    <style type="text/css">
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:center;padding-top:200px;}
    input[type=text],select{text-align:center;}
    input[type=button]{cursor:pointer;}
    </style>
    <script type="text/javascript">
    /* creating the empty array for storing the options */
    var ost=[];
    /* shorthand for document.getElementById(id) */
    function doc(id){return document.getElementById(id);}
    /* storing the options in the ost array for future use */
    function store(){
    var opts=doc('lb').options;
    for(var k=0; k<opts.length; k++){var temp=[opts[k].text,opts[k].value];ost.push(temp);}
    doc('pattern').focus();
    doc('btn1').onclick=get_options;
    }
     
    function get_options(){
    /* getting the input value */
    var val=doc('pattern').value;
    /* if the input value length < 1 (it's empty) stopping the function */
    if(val.length<1){return;}
    /* if the input value is not empty */
    var opts=doc('lb').options;
    /* removing all the options from the select (we already have them all stored in the ost array) */
    opts.length=0;
    /* looping through the ost array comparing each member[0] (which is an option text) with the given value */
    for(var i in ost){
    /* if the current member[0] contains a substring of the given value, we add a new option to the select element
    creating it from the current member[0] as the option text and current member[1] as the option value */
    if(ost[i][0].indexOf(val)!=-1){var o=new Option(ost[i][0],ost[i][1]);opts.add(o);}
    /* otherwise skip this member and continue the loop */
    else{continue;}
    }
    /* if none of the ost members[0] has the given value,
    adding an option with text='nothing found' and value='' */
    if(opts.length==0){var o = new Option('nothing found','');opts.add(o);};
    }
    /* storing the select element options onload */
    window.onload=store;
    </script>
    </head>
    <body>
    <form id="frm1" name="frm1" action="" method="GET">
    <select id="lb" name="lb" size="5">
    <option value="s1.txt~2013">s1.txt~2013</option>
    <option value="s2.txt~2013">s2.txt~2013</option>
    <option value="s3.txt~2012">s3.txt~2012</option>
    <option value="s4.txt~2012">s4.txt~2012</option>
    </select>
    <br /><br />
    <input type="text" name="pattern" id="pattern" />
    <br /><br />
    <input type="button" id="btn1" name="btn1" value="OK" />
    </form>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles