JQuery自定义搜索控件

小练习 根据选项搜索

效果：

 1 <style type="text/css">
 2 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;}
 3 .search .border {margin-right:0px;
 4     width:288px;
 5     height:32px;
 6     margin-right:10px;
 7     border:1px solid #ddd;
 8     background:#fff;}
 9
10  .search .lanmu {
11     position:relative;
12     float:left;
13     width:60px;
14     height:32px;
15     border-right:1px solid #ccc;
16     font-size:12px;
17 }
18  .search .lanmu i {
19     position:absolute;
20     left:9px;
21     top:14px;
22     width:7px;
23     height:4px;
24     background:url(images/forumicon2.gif) no-repeat 0 -223px;
25 }
26 .search .lanmu .down {
27     display:none;
28     cursor:pointer;
29     position:absolute;
30     width:60px;
31     line-height:26px;
32     left:-1px;
33     top:32px;
34     text-align:center;
35     border:1px solid #ccc;
36     background:#fff;
37 }
38  .search .lanmu .down li:hover {
39     background:#5cb82b;
40     color:#fff;
41 }
42  .search .lanmu span {
43     cursor:pointer;
44     padding-left:25px;
45     line-height:32px;
46 }
47  .search .input {
48     float:left;
49     width:185px;
50     padding:0 5px;
51     height:32px;
52     line-height:32px;
53 }
54  .search .sub {
55     float:left;
56     width:32px;
57     height:32px;
58     background:url(images/forumicon2.gif) no-repeat 0 -41px;
59 }
60  .search .btn-down,.btn-down{
61     float:left;
62     position:relative;
63     width:100px;
64     height:32px;
65     line-height:32px;
66     text-align:center;
67     color:#fff;
68     background:#5bb72b;
69     border:1px solid #5ab42a;
70     font-size:14px;
71 }
72 </style>

CSS样式

 1 <script type="text/javascript">
 2 $(function(){
 3     if($("#qty").val()=="帖子")
 4     {
 5         $(".lanmu span").html("<i></i>"+$("#litopic").text());
 6         $(".lanmu span").next().hide().removeClass(‘downshow‘);
 7     }
 8     else  if($("#qty").val()=="新闻")
 9     {
10         $(".lanmu span").html("<i></i>"+$("#litopic").text());
11         $(".lanmu span").next().hide().removeClass(‘downshow‘);
12     }
13     $(".lanmu span").click(function(event){
14             var _that = $(this);
15             _that.next().toggle().toggleClass(‘downshow‘);
16             $("#litopic").click(function(){
17                 $("#qty").val("帖子");
18                 _that.html("<i></i>"+$(this).text());
19                 _that.next().hide().removeClass(‘downshow‘);
20             });
21             $("#linews").click(function(){
22                 $("#qty").val("新闻");
23                 _that.html("<i></i>"+$(this).text());
24                 _that.next().hide().removeClass(‘downshow‘);
25             });
26             event.stopPropagation();
27         })
28         //空白点击关闭下拉
29         $(document).click(function(){
30             var $down = $(‘.lanmu .down‘);
31             if($down.hasClass(‘downshow‘)){
32                  $down.hide().removeClass(‘downshow‘);
33             }
34         })
35 });
36 function Search()
37 {
38     var tb= document.getElementById("txtname").value;
39     if(tb=="请输入搜索的内容"||tb.replace(/(^\s*)|(\s*$)/g, "")=="")
40     {
41        document.getElementById("txtname").value="";
42        alert("请输入搜索的内容！");
43        return;
44     }
45     var hqty=document.getElementById("qty").value
46     if(hqty=="帖子")
47     {
48        window.location.href="A.aspx?t=2&title="+escape(tb);
49     }
50     else if(hqty=="新闻")
51     {
52      window.location.href="B.aspx?t=2&name="+escape(tb);
53     }
54     return;
55 }
56
57 function show_select(input,btn,option,value){
58     inputobj=document.getElementById(input);
59     btnobj=document.getElementById(btn);
60     optionobj=document.getElementById(option);
61     valueobj=document.getElementById(value);
62     optionobj.style.display=optionobj.style.display==""?"none":"";
63     optionobj.onblur=function () {
64         optionobj.style.display="none";
65     }
66
67     for (var i=0;i<optionobj.childNodes.length;i++){
68         optionobj.focus();
69         optionobj.childNodes[i].onmouseover=function (){
70             this.className="itemsover";
71         }
72         optionobj.childNodes[i].onmouseout=function (){
73             this.className="itemsout";
74         }
75         optionobj.childNodes[i].onclick=function () {
76         //alert(this.innerHTML)
77             inputobj.innerHTML=this.innerHTML;
78             valueobj.value=this.innerHTML;
79             optionobj.blur();
80             optionobj.style.display="none";
81             if (input=="pro_color"){
82               loadpic(this.id,"");
83             }
84         }
85     }
86 }
87 </script>

Jquery

 1 <div class="search">
 2 <div class="border">
 3     <div class="lanmu">
 4         <span ><i></i>帖子</span>
 5         <ul class="down">
 6             <li id="litopic">帖子</li>
 7             <li id="linews">新闻</li>
 8         </ul>
 9     </div>
10     <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);"/>
11     <input id="Button1" type="button" class="sub" value="" title="搜索" onclick="Search" style="cursor: pointer"/>
12     <input name="qty" type="hidden" id="qty" value="帖子"/>
13 </div>
14 </div>

html