站内搜索简单粗暴放代码

全栈程序员-站长 • 2022年8月3日上午11:00 • 未分类 • 阅读 11

第一步：

　　创建表单，放搜索框

    <form >
        输入用户名：<input type="text" id="username" >    
        <span id="usernameInfo"></span><br>
        <br>
        <div style="position:relative">
            <input id="search" type="text" placeholder="Search" onkeyup="searchWord(this)">         <button type="submit">Submit</button>
            <div id="showDiv" style="display:none;position:absolute;z-index:1000;background:#fff; width:141px;border:1px solid #ccc;"></div>
        </div>
    </form>

第二步：

　　写JS

<script type="text/javascript">    
　　function overFn(obj){
　　　　$(obj).css("background","#DBEAF9");
　　}
　　function outFn(obj){
　　　　$(obj).css("background","#fff");
　　}                    
　　function clickFn(obj){
　　　　$("#search").val($(obj).html());
　　　　$("#showDiv").css("display","none");
　　}                    
   function searchWord(obj){
   　　//1、获得输入框的输入的内容
   　　var word = $(obj).val();
   　　//2、根据输入框的内容去数据库中模糊查询---List<Product>
   　　var content = "";
   　　$.post(
   　　"${pageContext.request.contextPath}/searchWord",
   　　{"word":word},
   　　function(data){
   　　　　//3、将返回的商品的名称 现在showDiv中
      　　if(data.length>0){
      　　　　for(var i=0;i<data.length;i++){
         　　　　content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
         　　}
      　　$("#showDiv").html(content);
      　　$("#showDiv").css("display","block");
      　　}
      },
      "json"
      );
　　}
</script>

第三步：

　　在Web层创建Servlet，使用的gson转换的json格式，需要导包

public class SearchWordServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {

        //获得关键字
        String word = request.getParameter("word");
        //查询改关键字的所有商品
        UserService service = new UserService();
        List<Object> userList = null;
        try {
            userList = service.findUserByWord(word);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        //[{"username":"admin","phone":"17805054371","role":"超级管理员"...},{},{}...]
        //使用json的转换工具
        /*1、JSonlib
        JSONArray fromObject = JSONArray.fromObject(userList);
        String string = fromObject.toString();
        System.out.println(string);
    */    
        Gson gson = new Gson();
        String json = gson.toJson(userList);
        response.setContentType("texy/html;charset=UTF-8");
        response.getWriter().write(json);
    
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        doGet(request,response);
    }
}

第四步：

　　创建Service

public class UserService {

    public List<Object> findUserByWord(String word) throws SQLException {
        UserDao dao = new UserDao();
        return  dao.findUserByWord(word);        
    }

}

第五步：

　　创建Dao，使用的C3P0和DBUtils

public class UserDao {
    public List<Object> findUserByWord(String word) throws SQLException {
        QueryRunner runner = new QueryRunner(C3P0Utils.getDataSource());
        String sql = "select * from user where username like ? limit 0,8";
        List<Object> query = runner.query(sql,new ColumnListHandler("username"),"%"+word+"%");
        return query;
    }

}

第六步：

　　完成并测试

站内搜索简单粗暴放代码