ajax+JQuery实现类似百度智能搜索框

1、ajax+jquery实现类似百度智能搜索框ajax+jquery实现类似百度智能搜寻框最近再学习ajax,上课教师让我们实现一个类似百度首页实现搜寻框的功能,刚开头做的时候没有一点头绪,查阅大量网上的资源后,发觉之前的与我们现在的有些区分,所以在此写出来,希翼能对大家有所协助.下面先展示下效果图:(ps:中的文字是参考的,不具有任何的袭击意义)项目的名目结构:一:首先是login.jsp页面 需要注重的是我是通过js的类库(jquery)封装的ajax,需要在webcontent下面导入jquery jar包,代码如下:insert title hereshuru width: 500px;

2、height: 35px;border: 1px solid c3c3c3;button width: 85px;height: 37px;border: 1px solid c3c3c3;box width: 500px;border: 1px solid c3c3c3;margin-left: -85px;display: none;text-align: left$(function() /0键盘抬起大事 通过div中的id猎取input输入框$("shuru").keyup(function() $("box").

3、empty();/1 猎取输入框的值var shuru = $(this).val().trim();/alert(shuru);/推断用户输入的是否为空,假如为空不发送ajaxif (shuru != null && shuru != "") /2 发送ajax$.post("loginservlet", "shuru=" + shuru, function(result) /alert(result);if (result = null | resul

4、t = "") $("box").css("display", "none"); else /遍历结果集$.each(result, function(index, data) /alert(index+""+data.message)/显示在躲藏div上面$("box").append("" + data.message + &quot

5、;");$("box").css("display", "block"););, "json"); else $("box").css("display", "none"););) 二 为loginservlrt.servlet 在 servlet包中 代码如下: 1 package com.wdh.servlet; 2 3 i

6、mport java.io.ioexception; 4 import java.util.list; 5 6 import javax.servlet.servletexception; 7 import javax.servlet.annotation.webservlet; 8 import javax.servlet.http.httpservlet; 9 import javax.servlet.http.httpservletrequest; 10 import javax.servlet.http.httpservletresponse;1112 import com.aliba

7、ba.fastjson.json;13 import com.wdh.bean.school;14 import com.wdh.dao.schooldao;15 import com.wdh.dao.schooldaoimpl;1617 /*18 * servlet implementation class loginservlet19 */20 webservlet("/loginservlet")21 public class loginservlet extends httpservlet 22 private static final long s

8、erialversionuid = 1l;2324 protected void doget(httpservletrequest request, httpservletresponse response)25 throws servletexception, ioexception 26 / 1猎取哀求参数27 string shuru = request.getparameter("shuru");28 / 2处理业务29 schooldao schooldao = new schooldaoimpl();30 list list = schoolda

9、o.querymore(shuru);31 system.out.println(list);32 / 将list集合转成 json字符串33 string json = json.tojsonstring(list);34 / 3 响应35 response.getwriter().write(json);3637 3839 protected void dopost(httpservletrequest request, httpservletresponse response)40 throws servletexception, ioexception 41 / todo auto-generated method stub42 do