首页 > 代码库 > 站内搜索——（二）
站内搜索——（二）
1.效果演示:
2.思路:
定义一个文本输入框，并在其下面定义一个div框，开始时候隐藏。当输入一个字母后就ajax异步请求数据，将返回的结果显示在div框中，并显示div框，点击div时将数据填充在文本输入框。
3.定义一个input输入框
<div class="form-group" style="position: relative;"> <input id="shangmian" type="text" class="form-control" placeholder="Search" onkeyup="find(this);"> <div id="showDiv" style="position: absolute; width: 170px; z-index: 3000; background-color: white; border: 1px solid; display: none;"></div> </div>
4.当键盘按下松开时去异步请求数据
对返回的数据进行处理，有结果时在下方显示一个div显示查询的结果，点击的时候讲结果写到上面的搜索框。
<script type="text/javascript"> function overFun(obj){ $(obj).css("background","#C0C1C5"); } function outFn(obj){ $(obj).css("background","#fff"); } function clickFn(obj){ $("#shangmian").val($(obj).html()); $("#showDiv").css("display","none"); } function find(obj){ //1.获取表单的值 var word = $(obj).val(); var content=""; //2.异步ajax去数据库模糊查询 $.post( "/fenye/zhanneisousuo", //请求地址 {"word":word}, //请求传递的参数，也可以是JSON function(data){ //data表示传递回来的数据，只有在成功的时候才有 if(data.length>0){ for(var i=0;i<data.length;i++){ content+="<div style=‘padding:5px;cursor:pointer;‘ onclick=‘clickFn(this)‘ onm ouseover=‘overFun(this);‘ onm ouseout=‘outFn(this);‘>"+data[i]+"</div>"; } $("#showDiv").css("display","block"); $("#showDiv").html(content); } }, "json" //表示返回内容的格式,json会将传回来的自动解析成json对象 ); } </script>
5.后台处理异步请求数据
1. 控制层获取请求参数并将传上来的对象转为JSON对象
package web;import java.io.IOException;import java.sql.SQLException;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;import net.sf.json.JSONArray;import service.UserService;@WebServlet("/zhanneisousuo")public class ZhanNeiSouSuo extends HttpServlet { private static final long serialVersionUID = 1L; public ZhanNeiSouSuo() { super(); // TODO Auto-generated constructor stub } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String word = request.getParameter("word"); UserService us = new UserService(); List<Object> objList=null; try { objList= us.findUserName(word); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }// 对返回的集合进行JSON转换，这个针对单个对象与集合有不同方法 JSONArray fromObject = JSONArray.fromObject(objList); String string = fromObject.toString(); System.out.println(string); //谷歌公司的，转一个或者集合都是这个方法 Gson gson = new Gson(); String json = gson.toJson(objList); System.out.println(json); response.setCharacterEncoding("utf-8"); response.getWriter().write(json); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); }}
2.service通过参数向dao请求数据
public List<Object> findUserName(String word) throws SQLException { List<Object> objList = userDao.findUserName(word); return objList; }
3.dao层模糊查询名字
// 模糊查询用户名字，并将名字取出后存入一列中 public List<Object> findUserName(String word) throws SQLException { QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource()); String sql = "select name from user where name like ? limit 0,8"; List<Object> objList = runner.query(sql, new ColumnListHandler("name"), "%" + word + "%"); return objList; }
站内搜索——（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。