Web条件搜索

阔别多日，又想起了博客，写点今天的东西，发现如果长时间不记录的话，学的东西很容易就会忘掉，
还是把这个任务记录到博客里面来的痛快，少废话，看代码。
今天主要做了条件搜索。在jsp的书写上遇到了一些问题。

<div id="searchData">
    <select id="condition" style="height:35px; font-size:20px;">
            <option label="日期">1</option>
            <option label="IP">2</option>
            <option label="区域ID">3</option>
    </select>
    <input style="height: 30px;font-size: 20px;" type="date" id="startTime" pattern="yyyy-MM-dd"/>
    <input style="height: 30px;font-size: 20px;" type="date" id="endTime" pattern="yyyy-MM-dd"/>
    <input style="height:30px; font-size:20px;width:300px;display: none;" type="text" id="IpContent" placeholder="请输入要查询的IP..." />
    <input  style="height:30px; font-size:20px;width:300px;display: none;" type="text" id="IdContent" placeholder="请输入要查询的区域ID..." />
    <img style="cursor: pointer; height:35px; margin-bottom:-10px;margin-left:-5px;margin-right:50px" src="图片地址url" onclick="javascript:search()" value="搜索" />
</div>

上面是jsp页面的静态书写。下面书写事件内容。注意：这里的input不能用type=“hidden”。
由于在后面的js的show和hide方法不能识别。写成hidden=”hidden”或者style里面写display=”none”。
日期那块的type有六种类型：
①type=”date” 直接显示年月日选控件。
②type=”datetime-local” 直接显示本地年月日 时分控件。
③type=”datetime” 直接显示UTC(世界协调)时间 年月日 时分控件。
④type=”month” 直接显示年月控件。
⑤type=”week” 直接显示年和周数(选择日期是此年的第几周)控件。
⑥type=”time” 是个文本框，输入时间，提交时检测输入的时间是否正确有效。

$("#searchData").click(function(){
        if($("#condition").val() == "1"){
            $("#startTime").show();
            $("#endTime").show();
            $("#IpContent").hide();
            $("#IdContent").hide(); 

        }else if($("#condition").val() == "2"){
            //alert("2");
            $("#startTime").hide();
            $("#endTime").hide();
            $("#IdContent").hide();
            $("#IpContent").show(); 
            //$("#searchData").append(Sou);
        }else if($("#condition").val() == "3"){
            //alert("3");
            $("#startTime").hide();
            $("#endTime").hide();
             $("#IpContent").hide();
            $("#IdContent").show(); 
            //$("#searchData").append(Suo);
        }
    });

上面这些完成的功能就是当你选择下拉框的时候，后面的input会随你所选择的option不同，
而做出不同的响应。具体的搜索js代码。

function search() {
    if($("#condition").val() == "1"){
        var startValue = encodeURI(encodeURI($("#startTime").val()));
        var endValue = encodeURI(encodeURI($("#endTime").val()));
        location.href='';
    }else if($("#condition").val() == "2"){
        var ipValue = encodeURI(encodeURI($("#IpContent").val()));
        location.href = '';
    }else if($("#condition").val() == "3"){
        var idValue = encodeURI(encodeURI($("#IdContent").val()));
        location.href = '';
    }
} 
$("#searchData").keydown(function (e) {       //当按下按键时  
    if (e.which == 13) {       //.which属性判断按下的是哪个键，回车键的键位序号为13  
        javascript:search();      //触发搜索按钮的点击事件  
    }  
});

这里的localhref就是自己要传递到后台Controller的地址。记得传参过去。
具体的后台处理程序，根据自己的所需改写，无非就是数据的获取和展示。今天就先写这些。每天都进步一点。