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

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

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

感谢您的阅读,欢迎参观我的个人网站:小嗨词典【 https://www.happydict.cn】

插件使用配置(config)还是很灵活的,当然也是弊端,配置不当,效果就没了。 使用时候,重要的参数如下(此demo参数配置点击右键看源码): url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1', queryName: 'q', //url?queryName=value,默认为输入框的name属性 jsonp: 'callback', //设置此参数名,将开启jsonp跨域功能(我要调淘宝数据,非跨域不可,淘宝的回调参数名就是callback),否则使用json数据结构 item: 'li', //下拉提示项目单位的选择器,默认一个li是一条提示,与processData写法相关。 processData: function(data){ }//自定义处理返回的数据,该方法可以return一个html字符串或jquery对象,将被写入到提示的下拉层中。 右键查看源码,将看到本demo所编写的processData函数是怎样的,所以这个参数是把如何表现交给你来做了,但别忘了配合 item 参数 getCurrItemValue: function($currItem){ }//定义如何去取得当前提示项目的值并返回值,插件根据此函数获取当前提示项目的值,并填入input中,此方法应根据processData参数来定义。 是的,如果你自定义了processData,这个参数恐怕也需要自定义,默认是获取$currItem.html(),你也可以return $currItem.attr('an attrName'); 右键查看源码,将看到本demo所编写的getCurrItemValue函数是怎样的 textchange: function($input){}, //不同于change事件在失去焦点触发,inchange依赖本插件,只要内容有变化,就会触发,并传入input对象 onselect: function($currItem){} //当选择了下拉的当前项目时执行,并传入当前项目。比如选择了某个提示项目,就提交表单。 sequential: 0, //按着方向键不动是否可以持续选择,默认不可以,设置值可以是任何等价的boolean
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值