Listbox not scrolling

**texas1992** · 07-06-2012 10:45 AM

I have a listbox filled with employee names. On the same page I have a textbox that I can type letters in and as I type the name that matches will be highlighted. My problem is that if the highlight moves below the bottom of the listbox the list does not scroll. How can I get this to scroll?

Here is my code:

ASPX page:

Code:

        <table>
            <tr>
                <td><asp:Label ID="Label1" runat="server" Text="Search" Font-Bold="True" 
                        ForeColor="#999999" /></td>
                <td><asp:TextBox ID="txtSearch" runat="server" onkeyup="return SearchList();" xmlns:asp="#unknown" /></td>
            </tr>
        </table>
    </div>
    <div align="center" class="datacellgreen">
        <asp:Label ID="Label2" runat="server" 
            Text="Highlight the employees you wish to add in the list below:" 
            Font-Bold="True" ForeColor="#999999" Width="100%"></asp:Label>
    </div>
    <div align="center">
        <asp:ListBox ID="lstEmpList" runat="server" Height="292px" 
            SelectionMode="Multiple" Width="100%"></asp:ListBox>
    </div>

javascript:

Code:

    function SearchList()
    {
        //var l =  ;
        var tb = document.getElementById('<%= txtSearch.ClientID %>');
        for (var i = 0; i < document.getElementById("lstEmpList").options.length; i++)
            {
                //alert("i: " + i + ", list: " + document.getElementById("lstEmpList")[i].text.toLowerCase() + ", TB: " + tb.value.toLowerCase());
                if (document.getElementById("lstEmpList")[i].text.toLowerCase().match(tb.value.toLowerCase()))
                {
                    document.getElementById("lstEmpList").options[i].selected = true;
                    return false;
                }
                else
                {
                    ClearSelection();
                }
            }
    }
    /********************************************************************/
    function ClearSelection()
    {
        document.getElementById("lstEmpList").selectedIndex = -1;
    }

Thanks.

**Padonak** · 07-06-2012 03:35 PM

maybe this can help

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>...</title>
<style type="text/css">
body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#000;color:#fff;padding:0px;margin:200px 0px 0px 0px;}
b{font-size:16px;font-style:italic;}
input{margin-left:15px;margin-right:15px;text-align:center;font-style:italic;}
</style>
<script type="text/javascript">
function doc(id){return document.getElementById(id);}

function checkInput(val,objId,param){
if(val==''){return;}
var opts=doc(objId).options;
for(var i=0;i<opts.length;i++){
if(param=='byval'){if(opts[i].value==val){doc(objId).selectedIndex=i;break;}else{continue;}}
if(param=='bytext'){if(opts[i].text==val){doc(objId).selectedIndex=i;break;}else{continue;}}
}
}
</script>
</head>
<body>
<select id="sel"> 
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
<option value="4">fourth</option>
<option value="5">fifth</option>
<option value="6">sixth</option>
</select>
<br /><br /><br /><br /><br />
<b>By value</b><input type="text" size="25" onkeyup="checkInput(this.value,'sel','byval')" /><b>By text</b><input type="text" size="25" onkeyup="checkInput(this.value,'sel','bytext')" />
</body>
</html>

Thread: Listbox not scrolling

Thread Tools

Display

Listbox not scrolling

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions