ajax 如何实现搜索输入框联想功能

2017-11-07 12:29:24来源:CSDN作者:niceLiuSir人点击

分享
第七城市

ajax是如何实现搜索输入框联想功能的,以下是一个简单的示例

jsp代码和jQeury代码中,直接连接ajaxLenovo.jsp即可,divLns.jsp用于显示联想结果下拉列表。
ajaxLenovo.jsp代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>联想搜索功能</title></head><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">    $(function(){        $("input[name=uname]").css({            "position":"relative"        });        $("#lns").css({            "border":"1px #ccc solid",            "width":"171px",            "position":"absolute",            "top":"84px",            "left":"72px",            "display":"none"        });        // 键盘松开的时候触发联想功能        $("input[name=uname]").keyup(function(){            var uname = $(this).val();            if(uname != ""){                $.ajax({                    url:"LenovoServlet",                    type:"post",                    data:{"uname":uname},                    dataType:"html",                    async:true,                    success:function(result){                        $("#lns").show();                        $("#lns").html(result);                        // 点击模糊列表的值,必须在这里写,其他位置不起作用                        $("li").unbind("click").bind("click", function(){                            $("input[name=uname]").val($(this).html());                            $("input[name=uname]").focus();                            $("#lns").hide();                        });                        // 点击其他地方的时候隐藏                        //$("input[name=uname]").blur(function(){                        //  $("#lns").hide();                        //});                    }                });            }else{                $("#lns").html("");                $("#lns").hide();            }        });    }); </script><body>    <h3>输入框联想搜索功能</h3>    请输入:<input type="text" name="uname"><input type="button" value="搜索">    <div id="lns"></div></body></html>

divLns.jsp代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>联想搜索功能</title></head><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">    $(function(){        $("ul").css({            "padding":"0px",            "margin":"0px",            "list-style":"none",            "width":"100%",        });        $("li").css({            "padding":"0px",            "margin":"0px",            "width":"100%"        });        $("li").hover(            function(){                $(this).css({"background-color":"#ddd"});            },            function(){                $(this).css({"background-color":"#fff"});            }        );    }); </script><body>    <ul>        <c:forEach begin="1" end="3" items="${unames }" var="uname" step="1">            <li>${uname }</li>        </c:forEach>    </ul></body></html>

控制器中servlet中的处理是利用模糊查询的方式查询出与输入相关的结果,返回给前端页面divLns.jsp,代码如下:

    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setContentType("text/html;charset=uft-8");        request.setCharacterEncoding("utf-8");        response.setCharacterEncoding("utf-8");        String uname = request.getParameter("uname");        UserService userService = new UserServiceImpl();        List<String> unamesList = userService.searchByName(uname);        request.setAttribute("unames", unamesList);        request.getRequestDispatcher("divLns.jsp").forward(request, response);    }

测试结果如下:
这里写图片描述

第七城市

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台