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

ゝ一纸荒年。 2022-09-17 15:13 319阅读 0赞

## 功能概述 ##

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

##         待补充。  源码构件 ##

1.引入js库、样式

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script type="text/javascript" src="&lt;%=path%&gt;/js/jquery.js"&gt;&lt;/script&gt;</td> 
 </tr> 
 </tbody> 
</table>

2.页面代码如下：

<table> 
 <tbody> 
 <tr> 
 <td>&lt;div class="cwbt"&gt;&nbsp; &lt;input type="text" name="anytext" id="anytext" size="50" &nbsp;value="&lt;s:property value='#request.anytextReq' /&gt;"/&gt;&amp;nbsp; &lt;input type="button" value="查询" class="btnm" οnclick="queryAny()"/&gt;&amp;nbsp; &lt;input type="button" value="高级查询" &nbsp;οnclick="to_queryMore();" class="btnm"/&gt;&amp;nbsp; &lt;/div&gt;</td> 
 </tr> 
 </tbody> 
</table>

3.js代码如下：

<table> 
 <tbody> 
 <tr> 
 <td>$(function() { &nbsp;//初始化查询条件 &nbsp;initQueryCond(); }); //初始化查询条件 function initQueryCond(){ &nbsp;var anytextReq="&lt;s:property value='#request.anytextReq' /&gt;"; &nbsp;var queryMode="&lt;s:property value='#request.queryMode' /&gt;";//查询模式 &nbsp;var anytextValue = "用户名";//关键字指定 &nbsp;if(anytextReq==""){ &nbsp; &nbsp;$("#anytext").val(anytextValue); &nbsp; &nbsp;$("#anytext").attr("style","color:#D5D5D5"); &nbsp;} &nbsp;if(queryMode=="more"){//查询模式的判断 &nbsp;showDiv("queryCondition"); &nbsp;}else{ &nbsp;closeDiv("queryCondition"); &nbsp;} &nbsp; &nbsp;$("#anytext").click(function(){ &nbsp; &nbsp; if($("#anytext").val()==anytextValue){ &nbsp;$("#anytext").val(""); } $("#anytext").attr("style","color:black"); &nbsp;}); &nbsp;$("#anytext").blur(function(){ &nbsp; &nbsp; if($("#anytext").val()==""){ &nbsp; $("#anytext").val(anytextValue); &nbsp; $("#anytext").attr("style","color:#D5D5D5"); } &nbsp;}); } //关键字查询需求 function queryAny(){ var anytext=$("#anytext").val(); if(anytext==anytextValue) anytext=""; window.location.href="&lt;%=path %&gt;/order/listUser.action?anytext="+anytext+"&amp;queryMode=any";//queryMode=any关键字查询 } //高级查询-初始化 function to_queryMore(){ &nbsp;$("#userid").val(""); &nbsp;$("#anytext").val(""); &nbsp;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= "&lt;%=path%&gt;/order/listUser.action?queryMode=more";//queryMode=more高级查询 vform.submit(); }</td> 
 </tr> 
 </tbody> 
</table>