jquery+jsp+ajax实现类似的百度搜索下拉框
2017-02-28 15:02
183 查看
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!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> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/keyWord.css"/> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script> <script type="text/javascript"> $(function(){ //取得div层 var $search = $('#search'); //取得输入框JQuery对象 var $searchInput = $search.find('#search-text'); //关闭浏览器提供给输入框的自动完成 $searchInput.attr('autocomplete','off'); //创建自动完成的下拉列表,用于显示服务器返回的数据,插入在搜索按钮的后面,等显示的时候再调整位置 var $autocomplete = $('<div class="autocomplete"></div>') .hide() .insertAfter('#submit'); //清空下拉列表的内容并且隐藏下拉列表区 var clear = function(){ $autocomplete.empty().hide(); }; //注册事件,当输入框失去焦点的时候清空下拉列表并隐藏 $searchInput.blur(function(){ setTimeout(clear,500); }); //下拉列表中高亮的项目的索引,当显示下拉列表项的时候,移动鼠标或者键盘的上下键就会移动高亮的项目,想百度搜索那样 var selectedItem = null; //timeout的ID var timeoutid = null; //设置下拉项的高亮背景 var setSelectedItem = function(item){ //更新索引变量 selectedItem = item ; //按上下键是循环显示的,小于0就置成最大的值,大于最大值就置成0 if(selectedItem < 0){ selectedItem = $autocomplete.find('li').length - 1; } else if(selectedItem > $autocomplete.find('li').length-1 ) { selectedItem = 0; } //首先移除其他列表项的高亮背景,然后再高亮当前索引的背景 $autocomplete.find('li').removeClass('highlight') .eq(selectedItem).addClass('highlight'); }; var ajax_request = function(){ //ajax服务端通信 $.ajax({ 'url':'${pageContext.request.contextPath}/project/keyWord', //服务器的地址 'data':{'keyword':$searchInput.val()}, //向后台传递的参数 'dataType':'json', //返回数据类型 'type':'POST', //请求类型 'success':function(data){ if(data.length) { //遍历data,添加到自动完成区 $.each(data, function(index,term) { //创建li标签,添加到下拉列表中 这里我传递的json数据key为projectName,所以用term.projectName $('<li></li>').text(term.projectName).appendTo($autocomplete) .addClass('clickable') .hover(function(){ //下拉列表每一项的事件,鼠标移进去的操作 $(this).siblings().removeClass('highlight'); $(this).addClass('highlight'); selectedItem = index; },function(){ //下拉列表每一项的事件,鼠标离开的操作 $(this).removeClass('highlight'); //当鼠标离开时索引置-1,当作标记 0 selectedItem = -1; }).click(function(){ //鼠标单击下拉列表的这一项的话,就将这一项的值添加到输入框中 $searchInput.val(term.projectName); //清空并隐藏下拉列表 $autocomplete.empty().hide(); }); });//事件注册完毕 //设置下拉列表的位置,然后显示下拉列表 var ypos = $searchInput.position().top; var xpos = $searchInput.position().left; $autocomplete.css('width',$searchInput.css('width')); $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"}); setSelectedItem(0); //显示下拉列表 $autocomplete.show(); } } }); }; //对输入框进行事件注册 $searchInput .keyup(function(event) { //字母数字,退格,空格 if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) { //首先删除下拉列表中的信息 $autocomplete.empty().hide(); clearTimeout(timeoutid); timeoutid = setTimeout(ajax_request,100); } else if(event.keyCode == 38){ //上 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem 9f4a ($autocomplete.find('li').length-1); } else { //索引减1 setSelectedItem(selectedItem - 1); } event.preventDefault(); } else if(event.keyCode == 40) { //下 //selectedItem = -1 代表鼠标离开 if(selectedItem == -1){ setSelectedItem(0); } else { //索引加1 setSelectedItem(selectedItem + 1); } event.preventDefault(); } }) .keypress(function(event){ //enter键 if(event.keyCode == 13) { //列表为空或者鼠标离开导致当前没有索引值 if($autocomplete.find('li').length == 0 || selectedItem == -1) { return; } $searchInput.val($autocomplete.find('li').eq(selectedItem).text()); $autocomplete.empty().hide(); event.preventDefault(); } }) .keydown(function(event){ //esc键 if(event.keyCode == 27 ) { $autocomplete.empty().hide(); event.preventDefault(); } }); //注册窗口大小改变的事件,重新调整下拉列表的位置 $(window).resize(function() { var ypos = $searchInput.position().top; var xpos = $searchInput.position().left; $autocomplete.css('width',$searchInput.css('width')); $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"}); }); }); </script> </head> <body> <div id = "search"> <label for="search-text">请输入关键词</label><input type="text" id="search-text" name="search-text" /> <input type="button" id="submit" value="搜索"/> </div> </body> </html>
后台接受并返回json数据
//ajax调用
@RequestMapping("/keyWord")
public void keyWord(Map<String, Object> model,String keyword) throws IOException{
List<String> list = projectBiz.keyWord(keyword);
JSONArray json=ListToJson.listToJsonForProject(list);
model.put("project",json);
}
相关文章推荐
- ajax结合jQuery autocomplete 实现类似百度搜索一样的输入联想
- ajax+jquery实现类似百度搜索提示框
- JQuery+ajax实现类似百度搜索自动匹配功能
- JQuery+ajax实现类似百度搜索自动匹配功能
- jquery实现百度类似搜索提示功能(AJAX应用)
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- jquery实现搜索框自动补全功能,类似google搜索引擎,数据是用Ajax从后台获得
- AJAX实现类似百度的搜索提示,自动补全和键盘、鼠标操作
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- JSP+jquery使用ajax方式调用json的实现方法
- jquery实现类似百度的搜索input输入框
- jquery自定义类似$.ajax()的方法实现代码
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- ajax(2)实现智能输入提示(类似百度搜索框智能输入)
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- jquery+ajax实现像百度搜索框中输入文字
- JSP实现类似百度谷歌分页
- AJAX实现类似百度的搜索提示,自动补全和键盘、鼠标操作
- ASP.NET利用ajax实现类似百度的智能提示框
- jsp+Struts2.0+jquery+ajax功能实现