web页面之搜索、高级搜索功能

最新推荐文章于 2024-08-20 00:36:53 发布

云焰

最新推荐文章于 2024-08-20 00:36:53 发布

阅读量9.5k

点赞数 4

分类专栏： Web开发

本文链接：https://blog.csdn.net/yan_dk/article/details/13170023

版权

Web开发专栏收录该内容

65 篇文章 2 订阅

订阅专栏

功能概述

web页面开发中，常见根据输入关键字搜索查询信息，如淘宝网、百度等的搜索，同时还附有包含多输入域条件的高级查询，这样的页面效果很常见。下面介绍一下我的开发方法。
页面效果

待补充。
源码构件

1.引入js库、样式

2.页面代码如下：

3.js代码如下：

$(function() {
//初始化查询条件
initQueryCond();
});
//初始化查询条件
function initQueryCond(){
var anytextReq="<s:property value='#request.anytextReq' />";
var queryMode="<s:property value='#request.queryMode' />";//查询模式
var anytextValue = "用户名";//关键字指定
if(anytextReq==""){
$("#anytext").val(anytextValue);
$("#anytext").attr("style","color:#D5D5D5");
}
if(queryMode=="more"){//查询模式的判断
showDiv("queryCondition");
}else{
closeDiv("queryCondition");
}

$("#anytext").click(function(){
if($("#anytext").val()==anytextValue){
$("#anytext").val("");
}
$("#anytext").attr("style","color:black");
});
$("#anytext").blur(function(){
if($("#anytext").val()==""){
$("#anytext").val(anytextValue);
$("#anytext").attr("style","color:#D5D5D5");
}
});
}
//关键字查询需求
function queryAny(){
var anytext=$("#anytext").val();
if(anytext==anytextValue) anytext="";
window.location.href="<%=path %>/order/listUser.action?anytext="+anytext+"&queryMode=any";//queryMode=any关键字查询
}
//高级查询-初始化
function to_queryMore(){
$("#userid").val("");
$("#anytext").val("");
showhideDivs('queryCondition');
}
//查询
function to_query(){
$("#currentPage").val("1");
to_searchorder('','');
}
function to_searchorder(torderby,torder){
var vform = document.myform;
vform.target='_self';
document.getElementById("page_orderby").value=torderby;
document.getElementById("page_order").value=torder;
vform.action= "<%=path%>/order/listUser.action?queryMode=more";//queryMode=more高级查询
vform.submit();
}