下拉列表提示效果

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
    EnableEventValidation="false" %>

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>项目下拉选择</title>

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script type="text/javascript"> 
    function DeleteSpacesAll(str)
    {
        var newstr="";
        var strs=str.split(" ");
        for(var i=0;i<strs.length;i++)
        {
            if(strs[i].length>0)
            {
                newstr+=strs[i];
            }
        }
        return newstr;
    }
     //兼容ie ff获取按键值
    $("#ctl00_cphMain_txtname").live("keyup",function(e){

        var keyvalue="";
        var theEvent = window.event || e; 
        var code = theEvent.keyCode || theEvent.which; 
        keyvalue= code;
        var text= DeleteSpacesAll($("#txtname").val());//去除所有空格
 
        if(text.length>0)
        {
            //判断按键是否有效
            if(parseInt(keyvalue)>=48&&parseInt(keyvalue)<=57||parseInt(keyvalue)>=65&&parseInt(keyvalue)<=90||parseInt(keyvalue)>=96&&parseInt(keyvalue)<=105||parseInt(keyvalue)==32||parseInt(keyvalue)==8)
            { 
                $("#lboxshow").html("");
               
                var name="张三,张翠山,张三丰,张无忌,李四,李世民,王朝,王莽,曹操,曹真,曹植"; //此处可以替换成ajax读取数据库信息
                var seachNamesHtml="";
                names=name.split(',');
                for(var i=0;i<names.length;i++)
                {
                  var index= names[i].lastIndexOf(text);
               
                  if(index>-1)
                  {
                     seachNamesHtml+="<option>"+ names[i]+"</option>";
                  }
                }
                if(seachNamesHtml.length>0)
                {
                    $("#lboxshow").html(seachNamesHtml);
                }
                else
                {
                   $("#lboxshow").html("<option value='-1'>输入姓名不存在!</option>");
                }
                $("#divlbx").css("display","");
            }
        }
        else
        {
           $("#divlbx").css("display","none");
        }       
     }
    
     function clickvalue(obj)
     {
        $("option").each(function(i)
        {
            if($(this).attr("selected"))
            {
                if($(this).val()!="-1"){
                    $("#txtname").val($(this).html());
                    $("#divlbx").css("display","none");
                    $("#txtname").focus();
                }
            }
        });
     }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <input type="text" value="" id="txtname" style="width: 294px; height: 15px" />
        </div>
        <div id="divlbx" style="display: none">
            <asp:ListBox ID="lboxshow" runat="server" Width="300px" οnclick="clickvalue(this)"
                Style="position: relative; position: absolute; height: 150px; ">
            </asp:ListBox>
        </div>
    </div>
    </form>
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值