带分类页签搜索框的实现

Posted 2020-10-02 yfceshi

需求：类似于淘宝搜索框。能够依据选择不同的分类进行帅选查询，效果图例如以下：

aspx代码例如以下：

       <div id="divSearch" class="form-wrapper">
                    <div class="tab_area">
                        <div id="divWaterMeterCode" class="tab hover"><span onclick="setSearchTab(0)">水表编码</span></div>
                        <div id="divClientCode" class="tab"><span onclick="setSearchTab(1)">客户编码</span></div>
                        <div id="divClientName" class="tab"><span onclick="setSearchTab(2)">客户名称</span></div>
                    </div>
                    <asp:TextBox ID="txtWords" runat="server"></asp:TextBox>
                    <asp:Button ID="btnSearch" runat="server" Text="搜索" OnClick="btnSearch_Click" />
                </div>
        <!--记录查询tab的状态，这里能够用来记录鼠标点击的是“水表编码”还是“客户编码”or“客户名称”页签 -->
        <asp:HiddenField ID="hidfSearchTag" runat="server" />

css代码例如以下：

/*----------------搜索框---------------------*/
* { margin: 0; padding: 0;}

html { color: #545454; font-size: 12px; font-family: "微软雅黑"}

a { text-decoration:none; color: #09F;}
img { border: none;}
/*span { float: left;}*/
.bg { background-image:url(bg.jpg); background-attachment:fixed;}
.header { margin:auto; width:100%; height: auto;}
 .tab_area{ height: 25px; width: 210px;}
 .tab_area .tab { height: 25px; line-height: 25px; width: 70px; float: left; text-align: center;}
 .tab_area .tab a { color: black;}
 .tab_area .tab a:hover { color: red;}
 .tab_area .hover { background: #3385ff; color:wheat;}
 .tab_area .hover a {color:wheat;}
 .search_form { border: 2px solid #C60; height: 30px; background: white; font-size: 14px; overflow: hidden; padding: 0;}
 .hot_words { height:20px; width: 480px; font-size: 12px; margin: 5px 0px 5px 0px; overflow: hidden;} 
 .hot_words .more {padding-right: 0; margin-right:0;}
 .hot_words a { padding-right: 5px; color: #CCC;}
 .hot_words a:hover { color: red; text-decoration: underline;}
 .search_form input[type=text] { height: 20px; line-height: 20px; width: 380px; color:#999; border: none; margin:0; padding:5px;}
 .search_form input[type=submit] { height: 30px; line-height: 30px; width: 80px; font-size: 14px; color: #C60; cursor: pointer; background:#CCC;  float: right; border: none; text-align: center; margin:0; padding:0;}
.tab_area span {
    width: 70px;
}
  .tab_area .tab span { color: black;}
 .tab_area .tab span:hover { color: red;cursor:pointer;}
 .tab_area .hover { background: #3385ff; color:wheat; cursor:pointer;}
 .tab_area .hover span {color:wheat;}
.form-wrapper {
 width: 653px;
 padding: 8px;
 padding-top:2px;
 margin: auto;
 overflow: hidden;
 float:left;
    margin-top:10px;
    text-align:left;
}
.form-wrapper #txtWords {
 width: 545px;
 height: 20px;
 padding: 2px 1px;
 float: left;    
 font: bold 14px 'lucida sans', 'trebuchet MS', 'Tahoma';
 border: 1px solid #ccc;
 border-radius: 3px;    
    /*margin-right:4px;*/  
}
.form-wrapper #txtWords:focus {
 outline: 0; 
 border-color: #aaa;
 box-shadow: 0 1px 1px #bbb inset;  
}
.form-wrapper #btnSearch {
 float: right;    
 border: 1px solid #00748f;
 height: 25px;
 width: 100px;
 padding: 0;
 cursor: pointer;
 font: bold 15px Arial, Helvetica;
 color: #fafafa;
 text-transform: uppercase;    
 background-color: #3385ff;
 background-image: linear-gradient(top, #31b2c3, #3385ff);
 border-radius: 3px;      
 text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #btnSearch:hover,
.form-wrapper #btnSearch:focus {  
 background-color: #3333FF;
 background-image: linear-gradient(top, #6699FF,#3333FF);
}  
.form-wrapper #btnSearch:active {
 outline: 0;    
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;    
}
.form-wrapper #btnSearch::-moz-focus-inner {
 border: 0;
}

js代码例如以下：

//设置查询tab高亮显示 參数：查询tab的索引 0開始
function setSearchTab(tag) {
    var div0 = document.getElementById("divWaterMeterCode");
    var div1 = document.getElementById("divClientCode");
    var div2 = document.getElementById("divClientName");
    var oprater = document.getElementById("hidfSearchTag");
    switch (tag) {
        case 0:
            div0.className = 'tab hover';
            div1.className = 'tab';
            div2.className = 'tab';
            oprater.value = "0";
            break;
        case 1:
            div0.className = 'tab';
            div1.className = 'tab hover';
            div2.className = 'tab';
            oprater.value = "1";
            break;
        case 2:
            div0.className = 'tab';
            div1.className = 'tab';
            div2.className = 'tab hover';
            oprater.value = "2";
            break;
    }
}

cs代码：

    //查询
        protected void btnSearch_Click(object sender, EventArgs e)
        {
            string searchTag = hidfSearchTag.Value;
            string words = txtWords.Text.Trim();
            DataTable dt = null;
            switch (searchTag)
            {
                case "0": //水表编码
                    dt = SearchInfoListByMeterCode(words);

                    break;
                case "1": //客户编码
                    break;
                case "2": //客户名称
                    break;
                default:
                    break;
            }
        }

实现思路事实上非常easy。用js来控制查询tab的颜色，并用一个隐藏控件来记录选择的分类。当点击查询button时。就能够依据隐藏控件中的值知道点击的是哪一分类，然后再进行查询。