Index 1

by Joe Saad

HTML

<input type="text" /><br />
<select id="indexList" name="indexList" onclick="onClickSelectOption();" onChange="onChangeSelectOption();" multiple="multiple">
<option value="ada">Ada</option>
<option value="asp">ASP</option>
<option value="assembly">Assembly</option>
<option value="batch">Batch</option>
<option value="C">C</option>
<option value="c++">C++</option>
<option value="c#">C#</option>
<option value="css">CSS</option>
<option value="flash">Flash Actionscript</option>
<option value="fortran">Fortran</option>
<option value="html">HTML</option>
<option value="java">JAVA</option>
<option value="javascript">JavaScript</option>
<option value="jsp">JSP</option>
<option value="objective-c">Objective C</option>
<option value="pascal">Pascal</option>
<option value="php">PHP</option>
<option value="perl">Perl</option>
<option value="python">Python</option>
<option value="ruby">Ruby</option>
<option value="sql">SQL</option>
<option value="xml">XML</option>
</select>

CSS

select {height:100px; clear:left;}

JavaScript

$(function(){
var pselect;
var x;
    $('input').keyup(function(){
    
        pselect = $('input').val().toLowerCase();
        pLength =  $('input').val().length;
        
        $('select option').each(function(){    
            x = $(this).text().toLowerCase();
           // alert(x);
            if (x.substring(0,pLength) == pselect) {
            
                $('select').val(x);
                
            }
        });
        
    
    });
    
});