用java等语言仿360首页拼音输入全模糊搜索和自动换肤

360首页搜索效果如下

1、完成编写的schoolnet校园网主要目录结构如下

主要实现支持中文、拼音首字母、拼音全字母的智能搜索和换肤

页面效果如下

主要核心代码如下

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>校园网首页面</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)"
    onclick="setsearchtype(this),setsearch()" name="searchdatas"
    id="books.png">资料</a> <a href="javascript:void(0)"
    onclick="setsearchtype(this),setsearch()" name="searchsongs"
    id="t01d566d0c28b32ddad.png">音乐</a> <a href="javascript:void(0)"
    onclick="setsearchtype(this),setsearch()" name="searchnews"
    id="newspaper.png">新闻</a> <a href="javascript:void(0)"
    onclick="setsearchtype(this),setsearch()" name="searchxiaoshuos"
    id="library.png">小说</a> <a href="javascript:void(0)"
    onclick="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"
   onsubmit="return checksearch()">
   <img src="/schoolnet/images/front/books.png" id="searchimg"
    width="32px" height="32px" style="margin-bottom:-10px" /><input
    type="text" class="topsearchtext" name="search" id="topsearchtext"
    onkeyup="setsearch()" onfocus="newsearch()" "/> <input
    id="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>校园网</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>应用</span>
   </a>
   <ul class="menulevel">
     <li><a href="/schoolnet/shou.do?flag=ShuoShuo&pageNow=1"
      title="">说说</a>
     </li>
     <li><a
      href="/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><a
      href="/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><a
      href="/schoolnet/news.do?flag=gonewsUI&typeid=1&pageNow=1"
      title="">新闻</a>
     </li>
     <li><a
      href="/schoolnet/datas.do?flag=godatasUI&pageNow=1&action=all"
      title="">资料</a>
     </li>
     <li><a
      href="/schoolnet/xiaoshuo.do?flag=goxiaoshuoUI&pageNow=1&id=all"
      title="">小说</a>
     </li>
     <li><a
      href="/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>关于</span>
   </a>
   <ul class="menulevel">
     <li><a href="/schoolnet/other.do?flag=goAboutUI#1" title="">关于我们</a>
     </li>
     <li><a href="/schoolnet/other.do?flag=goAboutUI#2" title="">网站地图</a>
     </li>
     <li><a href="/schoolnet/other.do?flag=goAboutUI#3" title="">版权说明</a>
     </li>
     <li><a href="/schoolnet/other.do?flag=goAboutUI#4" title="">友情链接</a>
     </li>
    </ul>
   </li>
   <li><a href="javascript:void(0)" title=""><span>设置</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">  <img
       src="/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函数

//用于设置切换搜索类型，触发input控件焦点时显示对应的热门（前五个）内容（资料、音乐、新闻、小说、日志）
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();
  }
}
//用于设置显示智能提示的内容（模糊搜索时匹配的前十个）
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)' onclick='hideli()' style='display:inline;float:right;margin-right:8px;'>关闭</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)' onclick='hideli()' style='display:inline;'>无任意匹配结果</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>}

做拼音转换时需导入pinyin4j.jar包
ChinesePinYinTool拼音转换工具类
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]);
  }
 }
 /**
  *
  * 将字符串转换成拼音数
  *
  *
  * @param src
  * @return
  */
 public static String[] stringToPinyin(String src) {
  return stringToPinyin(src, false, null);
 } 

 /**
  * 将字符串转换成拼音数
  *
  *
  * @param src
  * @return
  */
 public static String[] stringToPinyin(String src, String separator) {
  return stringToPinyin(src, true, separator);
 } 

 /**
  * 将字符串转换成拼音数
  *
  *
  * @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;
 } 

 /**
  * 将单个字符转换成拼音
  *
  * @param src
  * @return
  */
 public static String charToPinyin(char src, boolean isPolyphone,
   String separator) {
  // 创建汉语拼音处理
  HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();
  // 输出设置，大小写，音标方
  defaultFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);
  defaultFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
  StringBuffer tempPinying = new StringBuffer();
  // 如果是中
  if (src > 128) {
   try {
    // 转换得出结果
    String[] strs = PinyinHelper.toHanyuPinyinStringArray(src,
      defaultFormat);
    // 是否查出多音字，默认是查出多音字的第字符 

    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, "");
 } 

 /**
  * 将汉字转换成拼音
  *
  * @param hanzi
  * @param separator
  * @return
  */
 @SuppressWarnings("deprecation")
 public static String hanziToPinyin(String hanzi, String separator) {
  // 创建汉语拼音处理
  HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();
  // 输出设置，大小写，音标方
  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;
 } 

 /**
  * 将字符串数组转换成字符串
  *
  * @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();
 } 

 /**
  * 的将各个字符数组之间连接起来 

  *
  *
  * @param str
  * @return
  */
 public static String stringArrayToString(String[] str) {
  return stringArrayToString(str, "");
 } 

 /**
  * 将字符数组转换成字符
  *
  *
  * @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();
 } 

 /**
  * 将字符数组转换成字符
  *
  *
  * @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);
  // 创建返回对象
  int polyphoneSize = pinyingStr.length;
  char[] headChars = new char[polyphoneSize];
  int i = 0;
  // 截取首字 

  for (String s : pinyingStr) {
   char headChar = s.charAt(0);
   // 首字母是否大写，默认是小 

   if (isCapital) {
    headChars[i] = Character.toUpperCase(headChar);
   } else {
    headChars[i] = headChar;
   }
   i++;
  } 

  return headChars;
 } 

 /**
  * 取汉字的首字默认是大
  *
  * @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;
 }
}

数据库建立相关函数
fristPinyin ： 此函数是将一个中文字符串的第一个汉字转成拼音首字母 （例如："好的"->h）
pinyin ：此函数是将一个中文字符串对应拼音首字母的每个相连 (例如："好的"->hd)
to_pinyin ：此函数是将一个中文字符串对应拼音全字母的每个相连 (例如："好的"->haode)

CREATE FUNCTION `fristPinyin`(P_NAME VARCHAR(255)) RETURNS varchar(255) CHARSET utf8
BEGIN
 DECLARE 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
BEGIN
 DECLARE V_COMPARE VARCHAR(255);
 DECLARE V_RETURN VARCHAR(255);
 DECLARE I INT; 

 SET I = 1;
 SET V_RETURN = '';
 while I < LENGTH(P_NAME) do
  SET 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 = '') THEN
  SET 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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。