自制仿360首页支持拼音输入全模糊搜索和自动换肤
生活随笔
收集整理的這篇文章主要介紹了
自制仿360首页支持拼音输入全模糊搜索和自动换肤
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
360首頁搜索效果如下
1、完成編寫的schoolnet校園網(wǎng)主要目錄結(jié)構(gòu)如下
主要實現(xiàn)支持中文、拼音首字母、拼音全字母的智能搜索和換膚
頁面效果如下
主要核心代碼如下
1、head.jsp
?
<%@page import="java.io.File"%> <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>校園網(wǎng)首頁面</title> <link rel="stylesheet" href="/schoolnet/css/index.css" type="text/css" /> <script type="text/javascript" src="/schoolnet/js/ddsmoothmenu.js"></script> <script src="/schoolnet/js/jquery.js"></script> <script src="/schoolnet/js/jquery-ui.js"></script> <script type="text/javascript" src="/schoolnet/js/publicJs.js"></script> <script type="text/javascript" src="/schoolnet/myAJAX/ajax_uni.js"></script> <script type="text/javascript" src="/schoolnet/js/style.js"></script> <c:if test="${loginuser.skin.id!=null }"><script type="text/javascript">$(document).ready(function setskin() {var photo = '${loginuser.skin.photo}';$("body").css("background","#f6f6f6 url(/schoolnet/images/pf/" + photo+ ") top repeat");});</script></c:if> </head> <body><div class="topsearch"><div class="topsearchtype" id="searchtype"><a class="current" href="javascript:void(0)"οnclick="setsearchtype(this),setsearch()" name="searchdatas"id="books.png">資料</a> <a href="javascript:void(0)"οnclick="setsearchtype(this),setsearch()" name="searchsongs"id="t01d566d0c28b32ddad.png">音樂</a> <a href="javascript:void(0)"οnclick="setsearchtype(this),setsearch()" name="searchnews"id="newspaper.png">新聞</a> <a href="javascript:void(0)"οnclick="setsearchtype(this),setsearch()" name="searchxiaoshuos"id="library.png">小說</a> <a href="javascript:void(0)"οnclick="setsearchtype(this),setsearch()" name="searcharticles"id="blog.gif">日志</a></div><form id="search-form"action="/schoolnet/other.do?flag=searchdatas&searchpageNow=1"method="post" name="searchdatas" target="blank"οnsubmit="return checksearch()"><img src="/schoolnet/images/front/books.png" id="searchimg"width="32px" height="32px" style="margin-bottom:-10px" /><inputtype="text" class="topsearchtext" name="search" id="topsearchtext"οnkeyup="setsearch()" οnfοcus="newsearch()" "/> <inputid="inputsearchtype" type="submit" class="topsearchbutton"value="搜索資料" /></form><ul id="setsearch" class="setsearch"></ul></div><div id="MainMenu" class="ddsmoothmenu"><ul><li><a href="/schoolnet/login.do?flag=goHomeUI" title=""id="*menu_selected"><span>校園網(wǎng)</span></a></li><li><a href="/schoolnet/login.do?flag=goHomeUI" title=""><span>個人中心</span></a></li><li><a href="/schoolnet/profile.do?flag=goHomePageUI" title=""><span>我的主頁</span></a></li><li><a href="javascript:void(0)" title=""><span>應(yīng)用</span></a><ul class="menulevel"><li><a href="/schoolnet/shou.do?flag=ShuoShuo&pageNow=1"title="">說說</a></li><li><ahref="/schoolnet/album.do?flag=myAlbumUI&pageNow=1&userid=${loginuser.id }"title="">相冊</a></li><li><a href="/schoolnet/friend.do?flag=myfriendUI&pageNow=1"title="">好友</a></li><li><ahref="/schoolnet/article.do?flag=articleUI&pageNow=1&userid=${loginuser.id }"title="">日志</a></li><li><a href="/schoolnet/music.do?flag=goMusicHome&pageNow=1"title="">音樂</a></li><li><ahref="/schoolnet/news.do?flag=gonewsUI&typeid=1&pageNow=1"title="">新聞</a></li><li><ahref="/schoolnet/datas.do?flag=godatasUI&pageNow=1&action=all"title="">資料</a></li><li><ahref="/schoolnet/xiaoshuo.do?flag=goxiaoshuoUI&pageNow=1&id=all"title="">小說</a></li><li><ahref="/schoolnet/skin.do?flag=goskinUI&pageNow=1&id=all" title="">裝扮</a></li><li><a href="/schoolnet/share .do?flag=goShareUI&pageNow=1"title="">新鮮事</a></li></ul></li><li><a href="javascript:void(0)" title=""><span>關(guān)于</span></a><ul class="menulevel"><li><a href="/schoolnet/other.do?flag=goAboutUI#1" title="">關(guān)于我們</a></li><li><a href="/schoolnet/other.do?flag=goAboutUI#2" title="">網(wǎng)站地圖</a></li><li><a href="/schoolnet/other.do?flag=goAboutUI#3" title="">版權(quán)說明</a></li><li><a href="/schoolnet/other.do?flag=goAboutUI#4" title="">友情鏈接</a></li></ul></li><li><a href="javascript:void(0)" title=""><span>設(shè)置</span></a><ul class="menulevel"><li><a href="/schoolnet/register.do?flag=updUI">修改個人信息</a></li><li><a href="/schoolnet/login.do?flag=logout">退出</a></li></ul></li></ul><c:if test="${loginuser!=null }"><div id="page-wrap"><ul class="dropdown"><li id="menu_selected"><a id="menu_selected"href="/schoolnet/login.do?flag=goHomeUI">????????<imgsrc="/schoolnet/images/head/${loginuser.photo}" width="120px"height="45px" style=" margin-top:-18px;margin-left:-10px" /></a><ul class="sub_menu"><li><a href="/schoolnet/register.do?flag=updUI">修改個人信息</a></li><li><a href="/schoolnet/login.do?flag=logout">退出</a></li></ul></li></ul></div></c:if></div> </body> </html>2、主要js函數(shù)
?
?
//用于設(shè)置切換搜索類型，觸發(fā)input控件焦點時顯示對應(yīng)的熱門（前五個）內(nèi)容（資料、音樂、新聞、小說、日志） function setsearchtype(o){$("#searchtype a").removeClass("current");$(o).addClass("current");var inputsearchtype=$(o).text();$("#inputsearchtype").val("搜索"+inputsearchtype);document.getElementById("search-form").action="/schoolnet/other.do?flag="+o.name+"&searchpageNow=1";document.getElementById("search-form").name=o.name;document.getElementById("searchimg").src="/schoolnet/images/front/"+o.id;$("#topsearchtext").show();$("#searchfriendss").hide();if(o.name=="searchfriends"){$("#topsearchtext").hide();$("#searchfriendss").show();} } //用于設(shè)置顯示智能提示的內(nèi)容（模糊搜索時匹配的前十個） function setsearch() {var v=document.getElementById("topsearchtext").value;var type=document.getElementById("search-form").name;if(v.length==0){$("#setsearch").html("");}if(v.length>0){$.ajax({ cache: true, type: "POST", url : "/schoolnet/ChangeInfo", data: {"action":"setsearch","search":v,"searchtype":type}, async: false,dataType: "html",success: function(data) { $("#setsearch").html("");$("#setsearch").append(data);} }); }; }主要java文件
?
?
if("searchsongs".equals(searchtype)) <span style="white-space:pre"> </span>{ <span style="white-space:pre"> </span>String nameHEAD[]=ChinesePinYinTool.getHeadByString(search); <span style="white-space:pre"> </span>String nameHeadString=""; <span style="white-space:pre"> </span>for (int i = 0; i < nameHEAD.length; i++) { <span style="white-space:pre"> </span>nameHeadString+=nameHEAD[i]; <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>String nameALL[]=ChinesePinYinTool.stringToPinyin(search); <span style="white-space:pre"> </span>String nameAllString=""; <span style="white-space:pre"> </span>for (int i = 0; i < nameALL.length; i++) { <span style="white-space:pre"> </span>nameAllString+=nameALL[i]; <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>List<Song> songs=universityService.executeQueryByPage("from Song where to_pinyin(name) like '%"+ nameAllString +"%' or pinyin(name) like '%"+ nameHeadString +"%'", null, 1, 10); <span style="white-space:pre"> </span>for(int i=0;i<songs.size();i++) <span style="white-space:pre"> </span>{ <span style="white-space:pre"> </span>con +="<li><a target='blank' href='/schoolnet/music.do?flag=goPatentDisplay&pid="+songs.get(i).getPatent().getId()+"'>"+songs.get(i).getName()+"</a></li>"; <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>if (songs.size()!=0) { <span style="white-space:pre"> </span>con +="<li><a href='javascript:void(0)' οnclick='hideli()' style='display:inline;float:right;margin-right:8px;'>關(guān)閉</a></li>"; <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>else { <span style="white-space:pre"> </span>con +="<li><a href='javascript:void(0)' οnclick='hideli()' style='display:inline;'>無任意匹配結(jié)果</a></li>"; <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>out.write(con); <span style="white-space:pre"> </span>out.close(); <span style="white-space:pre"> </span>} else if("setpifu".equals(action)) <span style="white-space:pre"> </span>{ <span style="white-space:pre"> </span>String skinid=request.getParameter("skinid"); <span style="white-space:pre"> </span>Skin skin=(Skin) universityService.findById(Skin.class, Integer.valueOf(skinid)); <span style="white-space:pre"> </span>Users user=(Users) request.getSession().getAttribute("loginuser"); <span style="white-space:pre"> </span>user.setSkin(skin); <span style="white-space:pre"> </span>universityService.update(user); <span style="white-space:pre"> </span>}做拼音轉(zhuǎn)換時需導(dǎo)入pinyin4j.jar包
?
ChinesePinYinTool拼音轉(zhuǎn)換工具類
?
package schoolnet.utils;import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType; import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat; import net.sourceforge.pinyin4j.format.HanyuPinyinToneType; import net.sourceforge.pinyin4j.format.exception.BadHanyuPinyinOutputFormatCombination;/*** * 漢語拼音工具* * * */ public class ChinesePinYinTool {public static void main(String[] args) {String string[]=stringToPinyin("這個");for (int i = 0; i < string.length; i++) {System.out.println(string[i]);}}/*** * 將字符串轉(zhuǎn)換成拼音數(shù)* * * @param src* @return*/public static String[] stringToPinyin(String src) {return stringToPinyin(src, false, null);}/*** 將字符串轉(zhuǎn)換成拼音數(shù)* * * @param src* @return*/public static String[] stringToPinyin(String src, String separator) {return stringToPinyin(src, true, separator);}/*** 將字符串轉(zhuǎn)換成拼音數(shù)* * * @param src* @param isPolyphone* 是否查出多音字的拼音* * @param separator* 多音字拼音之間的分隔* * @return*/public static String[] stringToPinyin(String src, boolean isPolyphone,String separator) {// 判斷字符串是否為if ("".equals(src) || null == src) {return null;}char[] srcChar = src.toCharArray();int srcCount = srcChar.length;String[] srcStr = new String[srcCount];for (int i = 0; i < srcCount; i++) {srcStr[i] = charToPinyin(srcChar[i], isPolyphone, separator);}return srcStr;}/*** 將單個字符轉(zhuǎn)換成拼音* * @param src* @return*/public static String charToPinyin(char src, boolean isPolyphone,String separator) {// 創(chuàng)建漢語拼音處理HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();// 輸出設(shè)置，大小寫，音標(biāo)方defaultFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);defaultFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);StringBuffer tempPinying = new StringBuffer();// 如果是中if (src > 128) {try {// 轉(zhuǎn)換得出結(jié)果String[] strs = PinyinHelper.toHanyuPinyinStringArray(src,defaultFormat);// 是否查出多音字，默認(rèn)是查出多音字的第字符if (isPolyphone && null != separator) {for (int i = 0; i < strs.length; i++) {tempPinying.append(strs[i]);if (strs.length != (i + 1)) {// 多音字之間用特殊符號間隔起來tempPinying.append(separator);}}} else {tempPinying.append(strs[0]);}} catch (BadHanyuPinyinOutputFormatCombination e) {e.printStackTrace();}} else {tempPinying.append(src);}return tempPinying.toString();}public static String hanziToPinyin(String hanzi) {return hanziToPinyin(hanzi, "");}/*** 將漢字轉(zhuǎn)換成拼音* * @param hanzi* @param separator* @return*/@SuppressWarnings("deprecation")public static String hanziToPinyin(String hanzi, String separator) {// 創(chuàng)建漢語拼音處理HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();// 輸出設(shè)置，大小寫，音標(biāo)方defaultFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);defaultFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);String pinyingStr = "";try {pinyingStr = PinyinHelper.toHanyuPinyinString(hanzi, defaultFormat,separator);} catch (BadHanyuPinyinOutputFormatCombination e) {e.printStackTrace();}return pinyingStr;}/*** 將字符串?dāng)?shù)組轉(zhuǎn)換成字符串* * @param str* @param separator* 各個字符串之間的分隔* * @return*/public static String stringArrayToString(String[] str, String separator) {StringBuffer sb = new StringBuffer();for (int i = 0; i < str.length; i++) {sb.append(str[i]);if (str.length != (i + 1)) {sb.append(separator);}}return sb.toString();}/*** 的將各個字符數(shù)組之間連接起來* * * @param str* @return*/public static String stringArrayToString(String[] str) {return stringArrayToString(str, "");}/*** 將字符數(shù)組轉(zhuǎn)換成字符* * * @param str* @param separator* 各個字符串之間的分隔* * @return*/public static String charArrayToString(char[] ch, String separator) {StringBuffer sb = new StringBuffer();for (int i = 0; i < ch.length; i++) {sb.append(ch[i]);if (ch.length != (i + 1)) {sb.append(separator);}}return sb.toString();}/*** 將字符數(shù)組轉(zhuǎn)換成字符* * * @param str* @return*/public static String charArrayToString(char[] ch) {return charArrayToString(ch, " ");}/*** 取漢字的首字* * * @param src* @param isCapital* 是否是大* * @return*/public static char[] getHeadByChar(char src, boolean isCapital) {// 如果不是漢字直接返回if (src <= 128) {return new char[] { src };}// 獲取的拼String[] pinyingStr = PinyinHelper.toHanyuPinyinStringArray(src);// 創(chuàng)建返回對象int polyphoneSize = pinyingStr.length;char[] headChars = new char[polyphoneSize];int i = 0;// 截取首字for (String s : pinyingStr) {char headChar = s.charAt(0);// 首字母是否大寫，默認(rèn)是小if (isCapital) {headChars[i] = Character.toUpperCase(headChar);} else {headChars[i] = headChar;}i++;}return headChars;}/*** 取漢字的首字默認(rèn)是大* * @param src* @return*/public static char[] getHeadByChar(char src) {return getHeadByChar(src, true);}/*** 查找字符串首字母* * @param src* @return*/public static String[] getHeadByString(String src) {return getHeadByString(src, true);}/*** 查找字符串首字母* * @param src* @param isCapital* 是否大寫* @return*/public static String[] getHeadByString(String src, boolean isCapital) {return getHeadByString(src, isCapital, null);}/*** 查找字符串首字母* * @param src* @param isCapital* 是否大寫* @param separator* 分隔* * @return*/public static String[] getHeadByString(String src, boolean isCapital,String separator) {char[] chars = src.toCharArray();String[] headString = new String[chars.length];int i = 0;for (char ch : chars) {char[] chs = getHeadByChar(ch, isCapital);StringBuffer sb = new StringBuffer();if (null != separator) {int j = 1;for (char ch1 : chs) {sb.append(ch1);if (j != chs.length) {sb.append(separator);}j++;}} else {sb.append(chs[0]);}headString[i] = sb.toString();i++;}return headString;} }數(shù)據(jù)庫建立相關(guān)函數(shù)
?
fristPinyin ： 此函數(shù)是將一個中文字符串的第一個漢字轉(zhuǎn)成拼音首字母 （例如："好的"->h）
pinyin ：此函數(shù)是將一個中文字符串對應(yīng)拼音首字母的每個相連 (例如："好的"->hd)
to_pinyin ：此函數(shù)是將一個中文字符串對應(yīng)拼音全字母的每個相連 (例如："好的"->haode)
?
CREATE FUNCTION `fristPinyin`(P_NAME VARCHAR(255)) RETURNS varchar(255) CHARSET utf8 BEGINDECLARE V_RETURN VARCHAR(255);SET V_RETURN = ELT(INTERVAL(CONV(HEX(left(CONVERT(P_NAME USING gbk),1)),16,10), 0xB0A1,0xB0C5,0xB2C1,0xB4EE,0xB6EA,0xB7A2,0xB8C1,0xB9FE,0xBBF7, 0xBFA6,0xC0AC,0xC2E8,0xC4C3,0xC5B6,0xC5BE,0xC6DA,0xC8BB,0xC8F6,0xCBFA,0xCDDA,0xCEF4,0xD1B9,0xD4D1), 'A','B','C','D','E','F','G','H','J','K','L','M','N','O','P','Q','R','S','T','W','X','Y','Z');RETURN V_RETURN; END CREATE FUNCTION `pinyin`(P_NAME VARCHAR(255)) RETURNS varchar(255) CHARSET utf8 BEGINDECLARE V_COMPARE VARCHAR(255);DECLARE V_RETURN VARCHAR(255);DECLARE I INT;SET I = 1;SET V_RETURN = '';while I < LENGTH(P_NAME) doSET V_COMPARE = SUBSTR(P_NAME, I, 1);IF (V_COMPARE != '') THEN#SET V_RETURN = CONCAT(V_RETURN, ',', V_COMPARE);SET V_RETURN = CONCAT(V_RETURN, fristPinyin(V_COMPARE));#SET V_RETURN = fristPinyin(V_COMPARE);END IF;SET I = I + 1;end while;IF (ISNULL(V_RETURN) or V_RETURN = '') THENSET V_RETURN = P_NAME;END IF;RETURN V_RETURN; END CREATE FUNCTION to_pinyin(NAME VARCHAR(255) CHARSET gbk) RETURNS VARCHAR(255) CHARSET gbk BEGIN DECLARE mycode INT; DECLARE tmp_lcode VARCHAR(2) CHARSET gbk; DECLARE lcode INT; DECLARE tmp_rcode VARCHAR(2) CHARSET gbk; DECLARE rcode INT; DECLARE mypy VARCHAR(255) CHARSET gbk DEFAULT ''; DECLARE lp INT; SET mycode = 0; SET lp = 1; SET NAME = HEX(NAME); WHILE lp < LENGTH(NAME) DO SET tmp_lcode = SUBSTRING(NAME, lp, 2); SET lcode = CAST(ASCII(UNHEX(tmp_lcode)) AS UNSIGNED); SET tmp_rcode = SUBSTRING(NAME, lp + 2, 2); SET rcode = CAST(ASCII(UNHEX(tmp_rcode)) AS UNSIGNED); IF lcode > 128 THEN SET mycode =65536 - lcode * 256 - rcode ; SELECT CONCAT(mypy,pin_yin_) INTO mypy FROM t_base_pinyin WHERE CODE_ >= ABS(mycode) ORDER BY CODE_ ASC LIMIT 1; SET lp = lp + 4; ELSE SET mypy = CONCAT(mypy,CHAR(CAST(ASCII(UNHEX(SUBSTRING(NAME, lp, 2))) AS UNSIGNED))); SET lp = lp + 2; END IF; END WHILE; RETURN LOWER(mypy); END;?
?
轉(zhuǎn)載于:https://www.cnblogs.com/zz-cl/p/6012489.html
總結(jié)
以上是生活随笔為你收集整理的自制仿360首页支持拼音输入全模糊搜索和自动换肤的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单介绍VS2015自动测试工具
- 下一篇： 过滤器的概念与使用