您的位置：首页 > 其它

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

2017-11-07 09:29 531 查看

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"
4000
,
"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);
}

测试结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航