站内搜索——（二）

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)' onmouseover='overFun(this);' onmouseout='outFn(this);'>"+data[i]+"</div>";
                                    }
                                $("#showDiv").css("display","block"); 
                                $("#showDiv").html(content);
                                }
                            },
                            "json"         //表示返回内容的格式,json会将传回来的自动解析成json对象
                );


                }
            
        </script>

 

 

有时候需要点击外部的时候将上面的框给去掉需要加一个事件:(如果点击外部隐藏弹出的框)

    //点击外部的时候关闭那个模糊查询的框
    $(document).click(function(event) {
        if ($(event.target).attr("class") != "unitName") {
            if ($("#showDiv").css("display") == "block") {
                $("#showDiv").css("display", "none");// 点击外部的时候隐藏名字提示框
            }
        }
    });

 

 

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;
    }