ajax实现自动提示,js及ajax实现搜索下拉自动提示

js代码

function test(keyword,event){

//定义全局变量

var keyword = $("#keyword").val();

var sel = document.getElementById("sel");

$.post(

"serachServlet",//url

"keyword="+ keyword,//发送的数据

function(data){//获取响应回来的数据

document.getElementById("sel").innerHTML="";

var arr = new Array;

var arr = data.split("#");//将响应回来的数据按#拆分成数组

for(var i=0;i0){

sel.style.display='block';

}else{

sel.style.display='none';

}

//当用户按下上下键时获取相应的值

if(event.keyCode==40){

sel.focus();

}

},

//发送数据类型

"text"

);

}

function test2(){

//输入回车，获取输入框内容焦点

$("#sel").keypress(function(){

$("#keyword").focus();

$("#sel").css("display","none");

});

//双击，获取输入框内容焦点

$("#sel").dblclick(function(){

$("#keyword").focus();

$("#sel").css("display","none");

});

//将选中的下拉列表中的内容添加到输入框中

$("#keyword").val($("option:selected").html());

}jsp代码

自动完成搜索servlet代码

@WebServlet("/serachServlet")

public class SearchServlet extends HttpServlet {

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

//ajax处理页面禁用缓存

resp.setHeader("Content-type", "text/html;charset=utf-8");

resp.setHeader("expirs", "mon,26jul199705:00:00gmt");

resp.setHeader("cache", "no-cache,must-revalidate");

resp.setHeader("pragma", "no-cache");

//是设置字符集

req.setCharacterEncoding("utf-8");

PrintWriter out = resp.getWriter();

//获取传值，搜索商品名称的关键字

String keyword = req.getParameter("keyword");

//查询

SearchSerives sese = new SearchSerives();

String search = "";

try {

search = sese.searchMessage(keyword);

} catch (SQLException e) {

e.printStackTrace();

}

//search = "123#123#12";

out.print(search);

}

}

数据库连接，业务处理

public class SearchSerives {

//传入关键字，连接数据库查询

public static String searchMessage(String keyword) throws SQLException{

//sql语句

String sql="SELECT * FROM products WHERE productName like '%"+keyword+"'";

Connection conn = MySqlDbUtil.getConnection();

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(sql);

String rrs = "" ;

//循环结果集中的每一条记录

while(rs.next()){

rrs = rrs + "#" + rs.getString("productName");

}

//去掉第一个#

if(rrs.length()>0){

rrs= rrs.substring(1);

rrs= rrs.substring(rrs.indexOf("#"));

rrs= rrs.substring(1);

}

return rrs;

}

/*public static void main(String[] args) throws SQLException {

System.out.println(searchMessage("冰红茶"));

}*/

}

MySqlDbUtil，为对数据库连接的一个分装类