SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: <select> ...

  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <select> ...

    Code:
    <script type="text/javascript">
    
    function show () {
    var e = document.getElementById('select');
    var e2 = document.getElementById('input');
    
    for(i = 0; i< e.length; i++ ) {
    
    if( e.options[i].innerHTML.substring(0,e2.length).indexOf(e2.value) != -1 )   {   
    
    var o = document.createElement('option');
    var t = document.createTextNode(e.options[i].value ) ;
    o.appendChild(t) ;
    e.appendChild(o) ;
    
    }
    
    }
    
    // e.length = 0 ;
    
    
    }
    </script>
    
    <input type="text"  id ="input" onkeyup ="show ()">
    <select id="select">
    <option>airbag</option>
    <option>airway</option>
    <option>alamet</option>
    <option>alem</option>
    <option>alim</option>
    <option>alican</option>
    <option>alyanak</option>
    <option>baki</option>
    <option>bedi</option>
    <option>cari</option>
    <option>dadı</option>
    <option>dakika</option>
    </select>
    When I entered a character ( for example a ) in the input element, <select> will be

    <select>
    <option>airbag</option>
    <option>airway</option>
    <option>alamet</option>
    <option>alem</option>
    <option>alim</option>
    <option>alican</option>
    <option>alyanak</option>
    </select>

    When I entered two character ( for example al ) in the input element, <select> will be

    <select>
    <option>alamet</option>
    <option>alem</option>
    <option>alim</option>
    <option>alican</option>
    <option>alyanak</option>
    </select>

    When I entered three character ( for example ali ) in the input element, <select> will be

    <select>
    <option>alim</option>
    <option>alican</option>
    </select>

    How can I do?
    Last edited by muazzez; Jan 13, 2007 at 08:22.

  2. #2
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This does it.
    Code:
     
    <html>
    <head>
    <script type="text/javascript">
    var opts = new Array();
    
    function changeVal(val)
    {
    var sel = document.getElementById('myselect'); 
    
    sel.options.length=0;
    
    for(var j=0;j<opts.length;j++)
    {
    op = opts[j];
    
    if(val==op.text.substring(0,val.length))
    sel.options[sel.options.length]=op;
    }
    return;
    }
    
    function popArray()
    {
    var o = document.getElementById('myselect').options;
    for(var i=0;i<o.length;i++)
    {
    opts[i]=o[i];
    }
    return;
    }
    </script>
    </head>
    <body onload="popArray()">
    <form>
    <input type="text" onkeyup="changeVal(this.value)">
    <select id="myselect">
    <option value="0">A
    <option value="1">AB
    <option value="2">ABC
    <option value="3">ABCD
    </select>
    </form>
    </body>
    </html>
    Last edited by muazzez; Jan 13, 2007 at 11:03.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I entered a character ( for example A ) in the input element, <table> will be

    <table id="myTable">
    <tr>
    <td>A</td>
    <td>AB</td>
    <td>ABC</td>
    <td>ABCD</td>
    </tr>
    </table>

    When I entered two characters ( for example AB ) in the input element, <table> will be

    <table id="myTable">
    <tr>
    <td>AB</td>
    <td>ABC</td>
    <td>ABCD</td>
    </tr>
    </table>

    When I entered three characters ( for example ABC ) in the input element, <table> will be

    <table id="myTable">
    <tr>
    <td>ABC</td>
    <td>ABCD</td>
    </tr>
    </table>
    How can I do?

    This don't do it.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var arr = new Array();
    
    function changeVal(val)
    {
    var e = document.getElementById('myTable'); 
    
    e.getElementsByTagName('td').length=0;
    
    for(var j=0;j<arr.length;j++)
    {
    o = arr[j];
    
    if(val==o.firstChild.data.substring(0,val.length))
    e.getElementsByTagName('td')[e.getElementsByTagName('td').length]=o;
    }
    return;
    }
    
    function popArray()
    {
    var td = document.getElementById('myTable').getElementsByTagName('td');
    for(var i=0;i< td.length;i++)
    {
    arr[i]=td[i] ;
    }
    return;
    }
    </script>
    </head>
    <body onload="popArray()">
    
    <input type="text" onkeyup="changeVal(this.value)">
    <table id="myTable">
    <tr>
    <td>A</td>
    <td>AB</td>
    <td>ABC</td>
    <td>ABCD</td>
    </tr>
    </table>
    
    
    </body>
    </html>
    Last edited by muazzez; Jan 15, 2007 at 04:09.

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following works (although for some reason in FF the tds go from being displayed horizontally to being displayed vertically):
    Code:
    <html>
    <head><title></title>
    
    <style type="text/css">
    
    .show{
    	display:table;
    }
    .hide{
    	display:none;
    }
    
    
    </style>
    <script type="text/javascript" >
    
    function showVals(thatMatch)
    {
    	var tds = document.getElementById("myTable").getElementsByTagName("td");
    	for(var i = 0, len = tds.length; i < len; ++i)
    	{
    		var currTd = tds[i];
    		var currVal = currTd.firstChild.nodeValue;
    
    		if(currVal.substring(0, thatMatch.length) == thatMatch)
    		{
    			currTd.className = "show";
    		}
    		else
    		{
    			currTd.className = "hide";
    		}
    	}
    	
    	
    	
    }
    </script>
    </head>
    
    <body>
    
    <input type="text" onkeyup="showVals(this.value)">
    <table id="myTable">
    <tbody>
    <tr><td>A</td>
    <td>AB</td>
    <td>ABC</td>
    <td>ABCD</td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>

  5. #5
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks 7stud.
    I wrote display:inline;

    Code:
    <html>
    <head><title></title>
    
    <style type="text/css">
    
    .show{
    	display:inline;
    }
    .hide{
    	display:none;
    }
    
    
    </style>
    <script type="text/javascript" >
    
    function showVals(thatMatch)
    {
    	var tds = document.getElementById("myTable").getElementsByTagName("td");
    	for(var i = 0, len = tds.length; i < len; ++i)
    	{
    		var currTd = tds[i];
    		var currVal = currTd.firstChild.nodeValue;
    
    		if(currVal.substring(0, thatMatch.length) == thatMatch)
    		{
    			currTd.className = "show";
    		}
    		else
    		{
    			currTd.className = "hide";
    		}
    	}
    	
    	
    	
    }
    </script>
    </head>
    
    <body>
    
    <input type="text" onkeyup="showVals(this.value)">
    <table id="myTable">
    <tbody>
    <tr><td>A</td>
    
    <td>AB</td>
    <td>ABC</td>
    <td>ABCD</td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote display:inline;
    I tried that as well, but in FF 1.0.7, that didn't work very well for me. The tds displayed horizontally, but they were slightly offset vertically. Type in ABCDE and then backspace to see what I mean. Also, when I initially hit Caps Lock, the first A moved down slightly.

  7. #7
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use FF 2.0.0.1 . It works very well for me.
    When I entered a character ( for example A ) in the input element, <table> will be

    <table id="myTable">

    <tr><td>A</td></tr>
    <tr><td>AB</td></tr>
    <tr><td>ABC</td></tr>
    <tr><td>ABCD</td></tr>
    </tr>
    </table>

    When I entered two characters ( for example AB ) in the input element, <table> will be

    <table id="myTable">

    <tr><td>AB</td></tr>]
    <tr><td>ABC</td></tr>
    <tr><td>ABCD</td></tr>

    </table>

    When I entered three characters ( for example ABC ) in the input element, <table> will be

    <table id="myTable">

    <tr><td>ABC</td></tr>
    <tr><td>ABCD</td></tr>

    </table>

    Can you do this?

    After I asked a question, my head began to work. This does it.

    var tds = document.getElementById("myTable").getElementsByTagName("tr");
    for(var i = 0, len = tds.length; i < len; ++i)
    {
    var currTd = tds[i];
    var currVal = currTd.getElementsByTagName('td')[0].firstChild.nodeValue;

    Code:
    <html>
    <head><title></title>
    
    <style type="text/css">
    
    td{ width:100px; height:100px; border:2px solid blue; background-color:yellow;}
    .show{
    	display:block;
    }
    .hide{
    	display:none;
    }
    
    
    </style>
    <script type="text/javascript" >
    
    function showVals(thatMatch)
    {
    	var tds = document.getElementById("myTable").getElementsByTagName("tr");
    	for(var i = 0, len = tds.length; i < len; ++i)
    	{
    		var currTd = tds[i];
    		var currVal = currTd.getElementsByTagName('td')[0].firstChild.nodeValue;
    
    		if(currVal.substring(0, thatMatch.length) == thatMatch)
    		{
    			currTd.className = "show";
    		}
    		else
    		{
    			currTd.className = "hide";
    		}
    	}
    	
    	
    	
    }
    </script>
    </head>
    
    <body>
    
    <input type="text" onkeyup="showVals(this.value)">
    <table id="myTable">
    <tbody>
    <tr><td>A</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    
    <tr><td>AB</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    <tr><td>ABC</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    <tr><td>ABCD</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    
    </tbody>
    </table>
    
    </body>
    
    </html>
    Last edited by muazzez; Jan 16, 2007 at 03:07.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <input type="text" name="caps" value="" onkeyup="javascript:this.value=this.value.toUpperCase();">
    When I entered a character in input element, It will be A. The above code does this.
    I added this row
    thatMatch = thatMatch.toUpperCase();
    but it seems a
    Code:
     
    <html>
    <head><title></title>
    
    <style type="text/css">
    
    td{ width:100px; height:100px; border:2px solid blue; background-color:yellow;}
    .show{
    	display:block;
    }
    .hide{
    	display:none;
    }
    
    
    </style>
    <script type="text/javascript" >
    
    function showVals(thatMatch)
    
    
    {
    
    thatMatch = thatMatch.toUpperCase();
    	var tds = document.getElementById("myTable").getElementsByTagName("tr");
    	for(var i = 0, len = tds.length; i < len; ++i)
    	{
    		var currTd = tds[i];
    		var currVal = currTd.getElementsByTagName('td')[0].firstChild.nodeValue;
    
    		if(currVal.substring(0, thatMatch.length) == thatMatch)
    		{
    			currTd.className = "show";
    		}
    		else
    		{
    			currTd.className = "hide";
    		}
    	}
    	
    	
    	
    }
    </script>
    </head>
    
    <body>
    
    <input type="text" onkeyup="showVals(this.value)">
    <table id="myTable">
    <tbody>
    <tr><td>A</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    
    <tr><td>AB</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    <tr><td>ABC</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    <tr><td>ABCD</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    
    </tbody>
    </table>
    
    </body>
    
    </html>
    What will I do for this?

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but it seems a
    What will I do for this?
    Sorry, I can't understand your question. The script you posted works the same if you enter 'a' or 'A' in the input element. Do you want something else to happen?

  10. #10
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, my English is not very well.
    When I write small letter ( for example a ) in input element, it will be big letter ( for example A).
    I added this row. It writes big letters in input element. My problem was solved. Thanks for your time.
    input { text-transform: uppercase; }

    Code:
     
    <html>
    <head><title></title>
    
    <style type="text/css">
    
    td{ width:100px; height:100px; border:2px solid blue; background-color:yellow;}
    
    input { text-transform: uppercase;}
    .show{
    	display:block;
    }
    .hide{
    	display:none;
    }
    
    
    </style>
    <script type="text/javascript" >
    
    function showVals(thatMatch)
    
    
    {
    
    thatMatch = thatMatch.toUpperCase();
    	var tds = document.getElementById("myTable").getElementsByTagName("tr");
    	for(var i = 0, len = tds.length; i < len; ++i)
    	{
    		var currTd = tds[i];
    		var currVal = currTd.getElementsByTagName('td')[0].firstChild.nodeValue;
    
    		if(currVal.substring(0, thatMatch.length) == thatMatch)
    		{
    			currTd.className = "show";
    		}
    		else
    		{
    			currTd.className = "hide";
    		}
    	}
    	
    	
    	
    }
    </script>
    </head>
    
    <body>
    
    <input type="text" onkeyup="showVals(this.value)">
    <table id="myTable">
    <tbody>
    <tr><td>A</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    
    <tr><td>AB</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    <tr><td>ABC</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    <tr><td>ABCD</td><td>h&#252;cre</td><td>h&#252;cre</td></tr>
    
    </tbody>
    </table>
    
    </body>
    
    </html>


Bookmarks

Posting Permissions

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