搜索框制作

有时在添加数据时，常常会遇到下拉列表特别的长，有时甚至好几百行，下拉列表就不能完全的展示了。

我想到的就是在边上加一个模糊搜索的功能，根据输入的数据到数据库查找，然后将获取的值赋给下拉列表，这样增加了页面的人性化选择。

以下就是我用JQuery实现的效果以及代码展示：

<em class="ml10 scpy hand SearchCpy" rel="weihuDiv" id="SearchCpy">点击查找用户</em>
    <div class="dn" id="weihuDiv">
        <p class="h30 lh30 spl">
            <span class="ml5">关键字<input id="Text1" type="text" class="ipttext ml10 cpykey" /></span><span
                class="hand bd0 w60 h25 lh25 tc pb1 bg_btn2 white ml10 mt5" οnclick="searchbnt();">搜
                索</span>
        </p>
        <ul class="w80p ml10 h100 mt10 cpydetail bangdingdetail dn " style="overflow-x: hidden;
            overflow-y: auto;">
        </ul>
    </div>

    <script language="javascript">
    var searchbnt=function ()
    {
        var cpykey = $('#ctbian .cpykey').val();
        if (cpykey !="")
        {
         $.ajax({
                type:"POST",
                url:"Common/AllSearch.ashx",
                data:{action:"userSearch",key:cpykey},
                async:false,
                success:function(data){
                   if (data!="0")
                      $("#ctbian .cpydetail").html(data).show();
                   else
                      $("#ctbian .cpydetail").html("<li class=/"h25 lh25 bggray-8 blue/" οnmοuseοver=/"this.style.backgroundColor='#FFFFE1'/" οnmοuseοut=/"this.style.backgroundColor='#f9f9f9'/" ><span class=/"ml5/">对不起，找不到!</span></li>").show();
                 }
          });
          return false;
           }
           else
           { 
             alert("请输入关键字");
             return false;
        }
    }
    $(function ()
    { 
        $("#ctbian .bangdingdetail li span").live("click",function ()
        {
            $("#<%=ddlGen.ClientID %>").val($(this).attr("rel"));
            $("#ctbian").hide();
        });
    });
    </script>
<script type="text/javascript">
$(function ()
{
    $("body").append("<div class='bian1 dn bggray-8' id='ctbian'><span class='ctbclose' title='关闭'></span><span class=/"farrow/"></span><div class='bian2' style=/"border:6px solid #f6f9fa;/"></div><iframe class='lap' frameborder='0' scrolling='no'></iframe></div>")
    var ctbian=$("#ctbian");
    $("#ctbian .ctbclose").click(function(){ctbian.hide()});
    $("#SearchCpy").click(function ()
    {
        var Hdiv=$(this).attr("rel");
        var dispname=$("#"+Hdiv).html();
        var ctwidth=450;
        if ($(this).hasClass("scpy")){
            var py=20;
            dishtml=dispname;
        }
        var ctpos=$(this).offset();
        ctbian.find(".bian2").html(dishtml);
        var ctheight=$("#ctbian").outerHeight();
        ctbian.find(".lap").css({"width":(ctwidth-2), "height":(ctheight-2)});
        ctbian.css({"width":ctwidth+"px","top":ctpos.top+ctheight-30+"px","left":ctpos.left-py+"px","border":"1px solid #A0B9C4"}).show(200);
    });   
   
   
   
});
</script>