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

功能概述

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();
}

web页面之搜索、高级搜索功能相关推荐

百度搜索高级搜索指令和参数
最近听了一节关于搜索网络资源的课程,感觉打开了一扇新世界的大门,第一次了解到了关于百度搜索的一些骚操作(可能是敝人太过孤陋寡闻,让各位见笑了-),在这里记录一下一些常用的搜索指令和参数,对这方面没有过 ...
手机web页面调用打开QQ聊天功能（个人项目经验）
在实现手机web功能时候,会出现咨询页面客服的需求,此时客服使用的是QQ方式交流,就要求能够调用手机QQ的聊天功能,这个其实很简单,希望下面的分享会对各位博友有用. 在代码中添加点击事件: <a ...
搜索引擎高级搜索指令大全
搜索引擎高级搜索指令大全孤叶轮回发布时间: 18-12-1620:53 SEO 做SEO最重要的一个就是要学会如何搜索,这时可能会有人说往搜索框里输入文字难道还不会?普通的搜索肯定需要会,但是有一 ...
php 高级搜索下拉框,高级搜索页面advancedsearch.php调用自定义字段
下面跟大家谈的是关于"如何在在高级搜索页面advancedsearch.php调用自定义字段"方法: 步骤: 找到advancedsearch.php页面. $query = &q ...
elasticsearch高级搜索功能多维度分享
目录一.业务搜索核心功能二.高级搜索匹配功能三.搜索排序功能 elasticsearch高级搜索功能多维度分享,这也是实战的比较之路,此次我们全面分享常用的业务情景,全覆盖功能分享,让大家有一览 ...
织梦++高级搜索php,织梦多条件筛选功能实现(dede联动搜索) - DeDecms
织梦多条件筛选功能实现(dede联动搜索) 用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个 ...
找回淘宝的“高级搜索”功能
在淘宝找东西的时候遇到一个问题,当需要"包含关键字A但是不包含关键字B"的搜索结果的时候,形如"A-B"的搜索方法似乎无效.然后不知道从什么时候开始,淘宝把自己 ...
Android之实现长按Webview页面文字自定义复制、全选、分享、搜索、翻译功能（支持多语言，博文也有Demo下载地址）
1 需求和效果爆照浏览器app封装了Webview,然后实现实现长按Webview页面文字自定义复制.全选.分享.搜索.翻译功能(支持多语言),都在自己的浏览器app里面进行搜索和翻译,不跳到系统浏 ...
java搜索页面历史记录,使用JS location实现搜索框历史记录功能
首先,来看下效果图(样式什么的就不必吐槽了哈) html代码搜索记录: //用于保存记录信息 css代码 * { margin: 0; padding: 0; } input { border: 0 ...

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

功能概述

web页面之搜索、高级搜索功能相关推荐

最新文章

热门文章