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

2019-11-26 13:44:19

字体：大中小

来源：转载

供稿：网友

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;

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

上一篇：uploadify java实现多文件上传和预览

下一篇：Java 创建URL的常见问题及解决方案