JQuery自定义搜索控件

小练习 根据选项搜索

效果：

 

<style type="text/css">
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, th, td{ margin: 0;padding: 0;border:none;}
.search .border {margin-right:0px;
    width:288px;
    height:32px;
    margin-right:10px;
    border:1px solid #ddd;
    background:#fff;}

 .search .lanmu {
    position:relative;
    float:left;
    width:60px;
    height:32px;
    border-right:1px solid #ccc;
    font-size:12px;
}
 .search .lanmu i {
    position:absolute;
    left:9px;
    top:14px;
    width:7px;
    height:4px;
    background:url(images/forumicon2.gif) no-repeat 0 -223px;
}
.search .lanmu .down {
    display:none;
    cursor:pointer;
    position:absolute;
    width:60px;
    line-height:26px;
    left:-1px;
    top:32px;
    text-align:center;
    border:1px solid #ccc;
    background:#fff;
}
 .search .lanmu .down li:hover {
    background:#5cb82b;
    color:#fff;
}
 .search .lanmu span {
    cursor:pointer;
    padding-left:25px;
    line-height:32px;
}
 .search .input {
    float:left;
    width:185px;
    padding:0 5px;
    height:32px;
    line-height:32px;
}
 .search .sub {
    float:left;
    width:32px;
    height:32px;
    background:url(images/forumicon2.gif) no-repeat 0 -41px;
}
 .search .btn-down,.btn-down{
    float:left;
    position:relative;
    width:100px;
    height:32px;
    line-height:32px;
    text-align:center;
    color:#fff;
    background:#5bb72b;
    border:1px solid #5ab42a;
    font-size:14px;
}
</style>

<script type="text/javascript">
$(function(){
    if($("#qty").val()=="帖子")
    {
        $(".lanmu span").html("<i></i>"+$("#litopic").text());
        $(".lanmu span").next().hide().removeClass('downshow');
    }
    else  if($("#qty").val()=="新闻")
    {
        $(".lanmu span").html("<i></i>"+$("#litopic").text());
        $(".lanmu span").next().hide().removeClass('downshow');
    }
    $(".lanmu span").click(function(event){
            var _that = $(this);
            _that.next().toggle().toggleClass('downshow');
            $("#litopic").click(function(){
                $("#qty").val("帖子");
                _that.html("<i></i>"+$(this).text());
                _that.next().hide().removeClass('downshow');
            });
            $("#linews").click(function(){
                $("#qty").val("新闻");
                _that.html("<i></i>"+$(this).text());
                _that.next().hide().removeClass('downshow');
            });
            event.stopPropagation();
        })
        //空白点击关闭下拉
        $(document).click(function(){
            var $down = $('.lanmu .down');
            if($down.hasClass('downshow')){
                 $down.hide().removeClass('downshow');
            }
        })
});
function Search()
{
    var tb= document.getElementById("txtname").value;
    if(tb=="请输入搜索的内容"||tb.replace(/(^\s*)|(\s*$)/g, "")=="")
    {
       document.getElementById("txtname").value="";
       alert("请输入搜索的内容！");
       return;
    }
    var hqty=document.getElementById("qty").value
    if(hqty=="帖子")
    {
       window.location.href="A.aspx?t=2&title="+escape(tb);
    }
    else if(hqty=="新闻")
    {
     window.location.href="B.aspx?t=2&name="+escape(tb);
    }
    return;
}

function show_select(input,btn,option,value){
    inputobj=document.getElementById(input);
    btnobj=document.getElementById(btn);
    optionobj=document.getElementById(option);
    valueobj=document.getElementById(value);
    optionobj.style.display=optionobj.style.display==""?"none":"";
    optionobj.onblur=function () {
        optionobj.style.display="none";
    }

    for (var i=0;i<optionobj.childNodes.length;i++){
        optionobj.focus();
        optionobj.childNodes[i].onmouseover=function (){
            this.className="itemsover";
        }
        optionobj.childNodes[i].onmouseout=function (){
            this.className="itemsout";
        }
        optionobj.childNodes[i].onclick=function () {
        //alert(this.innerHTML)
            inputobj.innerHTML=this.innerHTML;
            valueobj.value=this.innerHTML;
            optionobj.blur();
            optionobj.style.display="none";
            if (input=="pro_color"){
              loadpic(this.id,"");
            }
        }
    }
}
</script>

<div class="search">
<div class="border">
    <div class="lanmu">
        <span ><i></i>帖子</span>
        <ul class="down">
            <li id="litopic">帖子</li>
            <li id="linews">新闻</li>
        </ul>
    </div>
    <input id="txtname" type="text" class="input" onkeydown="(function(e){if(!e) e=window.event;switch (e.keyCode|e.which|e.charCode){case 13:Serach();break;}})(event);"/>
    <input id="Button1" type="button" class="sub" value="" title="搜索" onclick="Search" style="cursor: pointer"/>
    <input name="qty" type="hidden" id="qty" value="帖子"/>
</div>
</div>