當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

web通讯录之搜索功能

發(fā)布時(shí)間：2024/8/23 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 web通讯录之搜索功能小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

手機(jī)號(hào)搜索：

姓名搜索：

拼音搜索：

城市搜索：

性別搜索：

點(diǎn)擊姓名或者電話顯示完整信息

相信大家期待自己所寫的搜索功能類似于百度、谷歌這種搜索引擎，有興趣的讀者可以去學(xué)學(xué)SEO，在這里我用的仍然是我們常見的搜索功能，只不過是把多種搜索綜合在一起，也就是設(shè)置一個(gè)優(yōu)先級(jí)搜索，例如當(dāng)用戶輸入WJ時(shí)候，默認(rèn)先找電話、再找姓名、最后找姓名等等，當(dāng)然居然是搜索功能當(dāng)然要用到我們偉大的ajax了，相信用ajax比較容易但是自己通過ajax從服務(wù)器像客戶端傳值比較麻煩，由于我們搜索顯示的用戶信息有很多，因此我們可以把它封裝成JSON數(shù)據(jù)傳到客戶端然后再調(diào)用把結(jié)果輸出顯示，由于自己不想操作那么麻煩，因此我把顯示搜索結(jié)果的信息在另外一個(gè)頁(yè)面中顯示出來，也就是在通訊錄頁(yè)面進(jìn)行搜索在ajaxshow.jsp用戶顯示搜索結(jié)果，好了，廢話不多說上代碼。

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="請(qǐng)輸入查找的聯(lián)系人"/>?<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('該功能還未完善，敬請(qǐng)期待!')"><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="請(qǐng)輸入分組名" /><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>局部顯示頁(yè)面</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代碼太多就沒有粘貼了。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的web通讯录之搜索功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。