web通讯录之搜索功能

手机号搜索：

姓名搜索：

拼音搜索：

城市搜索：

性别搜索：

点击姓名或者电话显示完整信息

相信大家期待自己所写的搜索功能类似于百度、谷歌这种搜索引擎，有兴趣的读者可以去学学SEO，在这里我用的仍然是我们常见的搜索功能，只不过是把多种搜索综合在一起，也就是设置一个优先级搜索，例如当用户输入WJ时候，默认先找电话、再找姓名、最后找姓名等等，当然居然是搜索功能当然要用到我们伟大的ajax了，相信用ajax比较容易但是自己通过ajax从服务器像客户端传值比较麻烦，由于我们搜索显示的用户信息有很多，因此我们可以把它封装成JSON数据传到客户端然后再调用把结果输出显示，由于自己不想操作那么麻烦，因此我把显示搜索结果的信息在另外一个页面中显示出来，也就是在通讯录页面进行搜索在ajaxshow.jsp用户显示搜索结果，好了，废话不多说上代码。

tongxunlu.jsp代码:

<%@ page language="java" import="com.student.servlet.*" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@page import="java.util.*" import="com.student.vo.User"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>通讯录</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="js/sort.js"></script><%Vector<User> vector=new Vector<User>();vector=(Vector<User>)request.getAttribute("name");User user=(User)request.getSession().getAttribute("myself");Set<String> set=new HashSet<String>();set=(Set<String>)request.getAttribute("group");%>
<style>input {border: 2px solid #7BA7AB;border-radius: 5px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){var $div4=$("#sum");var $div3=$("#cc3");$div4.hide();$div3.hide();$("#c1").click(function(){$div4.toggle(500); });$("#c2").click(function(){;$div3.toggle(500); });
});
</script>
<script type="text/javascript">var xmlHttp;function createXMLHttp(){xmlHttp=new XMLHttpRequest();  }function f(id){createXMLHttp();xmlHttp.open("POST","studentFind?username=<%=user.getId()%>&id="+id);xmlHttp.onreadystatechange=showMsgCallback;xmlHttp.send(null); }function showMsgCallback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var text=xmlHttp.responseText;document.getElementById("mark").innerHTML=text;}}} function f1(id){createXMLHttp();xmlHttp.open("POST","FindGroupName?username=<%=user.getId()%>&id="+id);xmlHttp.onreadystatechange=showMsgCallback1;xmlHttp.send(null);    }function showMsgCallback1(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var text=xmlHttp.responseText;if(text=="yes");else alert("分组名存在");}}}
</script>
<form id="fy" action="studentFind?" method="post"><input name="find" id="find" οnkeyup="f(this.value)"style="width:300px;height:30px; redius:1px;"type="text" placeholder="请输入查找的联系人"/> <img style="width:20px;"alt="" src="img/search.png"><a href="javascript:window.location.href='tianjia?id=<%=user.getId()%>'"><img style="width:20px;"alt="" src="img/useradd.png"></a><a href="javascript:window.location.href='tiaozhuan.jsp'"><img style="width:20px;"alt="" src="img/exit.png"></a><span id="mark"></span>
</form><div class="gongneng"><a href="myself.jsp"><div class="page"><img style="width:50px;height: 50px;" src="img/xiaomai.jpg" alt=""></div><div >我的名片</div></a></div>
<div class="gongneng"><div class="page"><img style="width:50px;height: 50px;"src="img/katongman.jpg" alt=""></div><span id="c1">我的分组</span>     <a id="c2"><img alt="" src="img/tianjia.png"></a>   <a οnclick="javascript:alert('该功能还未完善，敬请期待!')"><img alt="" src="img/delete.png"></a></div>
<div id="cc3"class="gongneng"><div class="page"><img style="width:50px;height: 50px;"src="img/katongman.jpg" alt=""></div><form action="addgroup?id=<%=user.getId() %>" method="post"><input id="newGroupName" name="newGroupName" type="text" οnblur="f1(this.value)" placeholder="请输入分组名" /><input type="submit" value="添加"><span style="color:red;" id="testName"></span></form></div>
<div id="sum">
<%for(String name:set){ %>
<div id="cc" class="gongneng"><a href="ceshi?id=<%=name%>&username=<%=user.getId()%>"><div class="page"><img style="width:50px;height: 50px;"src="img/katongman.jpg" alt=""></div><div id="name11"><%=name %></div></a>
</div>
<%} %>
</div>
<div class="sort_box"><%int k=7;for(int i=0;i<vector.size();i++,k--){if(k<1)k=7;//用来输出图片%>    <div class="sort_list"><a href="findAllServlet?id=<%=vector.get(i).getId()%>"><div class="num_logo"><img src="img/<%=k %>.jpg" alt=""></div><div class="num_name"><%=vector.get(i).getName()%></div></a></div>        <%} %></div>
<div class="initials"><ul><li><img src="img/068.png"></li></ul>
</div>
</body>
</html>

ajaxshow.jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ page import="java.util.*" import="com.studen.servlet.*" import="com.student.vo.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>局部显示页面</title>
</head>
<body>
<%request.setCharacterEncoding("utf-8");Set<people> set = new HashSet<people>();set=(Set<people>)request.getAttribute("rs");
/*  Vector<User> rs=new Vector<User>();rs=(Vector<User>)request.getAttribute("rs"); */%><div style="border:3px solid ">
<% for(people user:set) {%>
<ul style="background:white; width:300px;">
<li><a style="margin-top:40px;font-size:20px;color:black; font-family:Times New Roman;" href="findAllServlet?id=<%=String.valueOf(user.getId())%>">   <%=user.getName()%>   <%=user.getTel()%>
</a></li>
</ul>
<%} %>
</div>
</body>
</html>

servlet代码太多就没有粘贴了。

web通讯录之搜索功能相关推荐

Android通讯录开发之通讯录联系人搜索功能最新实现，kotlin入门到精通pdf
'\u5940', '\u97a5', '\u513f', '\u53d1', '\u5e06', '\u531a', '\u98de', '\u5206', '\u4e30', '\u8985', ...
使用Microsoft SQL Server 2000全文搜索功能构建Web搜索应用程序 --作者：Andrew B. Cencini...
[摘要]了解如何充分利用SQL Server 2000的全文搜索功能.本文包含有关实现最大吞吐量和最佳性能的几点提示和技巧. 概述使用Microsoft© SQL Server 2000的全文搜索功 ...
python通讯录的录入与测试_python实现手机通讯录搜索功能
# -*- coding:utf-8 -*- # 练习2: # 模拟手机通讯录搜索功能 class PERSON(object): def __init__(self): self.name_list ...
python实现手机通讯录_python实现手机通讯录搜索功能
# -*- coding:utf-8 -*- # 练习2: # 模拟手机通讯录搜索功能 class PERSON(object): def __init__(self): self.name_list ...
使用flask实现基于elasticsearch的web端搜索功能
概述干这个远程实习也有一个月了,感觉还不错,一天200的薪资对于一个在校大学生来讲已经不低了.上一周,领导布置了这一周的新的任务.大致要求就是做一个web端的搜索页面,大致逻辑如下图所示: 首先呢, ...
web前端html实例-Html5实现的语音搜索功能
细心的朋友可能会观察到谷歌搜索右侧有个语音搜索功能,能够实现语音识别功能,可能功能还不够完善,不过也算是一种趋势,下面就介绍一下如何实现此功能,代码如下: <input type="t ...
Java Web简单搜索功能实现
小demo,没有使用框架. webapp项目,用到了servlet + jsp,使用jdbc从MySQL中查询数据构建工具maven 先上截图 pom.xml 注意版本问题! <propert ...
Hexo集成Algolia实现搜索功能
2年前搭建的hexo博客好久没有维护了,一看 hexo 以及先前使用 butterfly 主题已经更新好几个版本了,看介绍在速度性能上有了很大的提高,于是打算给 hexo 升个级,整理整理翻翻新.通过 ...
java 搜索业务怎么写_Java项目实战第11天：搜索功能的实现
原标题:Java项目实战第11天:搜索功能的实现今天是刘小爱自学Java的第110天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 事先说明:关于今天的搜索功能实现. 并没有使用到倒排索引这 ...

web通讯录之搜索功能

web通讯录之搜索功能相关推荐

最新文章

热门文章