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

功能概述

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

页面效果

        待补充。

源码构件

1.引入js库、样式

2.页面代码如下：

3.js代码如下：

$(function() {  //初始化查询条件  initQueryCond(); }); //初始化查询条件 function initQueryCond(){  var anytextReq="";  var 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(); }