ajax完成仿浏览器搜索框输入部分内容提示

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
	
	$(function(){
		//文本框keyup的时候发送ajax
		$("#tid").keyup(function(){
			//获取文本框中的值
			var $value = $(this).val();
			//alert($value);
			//内容为空的时候不发送ajax
			if($value!=null&&$value!=''){
				//清空div
				$("#did").html("");
				
				$.post(
				"/ajax_/search",
				"kw="+$value,
				function(d){
					//alert(d);
					var arr = d.split(",");
					//遍历数组
					$(arr).each(function(){
						//可以将每一个值放入一个div,将其插入到id为did的div
						$("#did").append($("<div>"+this+"</div>"));
						
					});
					//将div显示
					$("#did").show();
				
				}

				);
				
			}else{
				//内容为空的时候，将div隐藏
				$("#did").hide();
				
				
			}
			
			
		});
		
		
		
		
	})




</script>

<body>
	<center>
		<div>
			<h1>搜索</h1>
			<div>
				<input name="kw" id="tid"><input type="button" value="搜索一下">
			
			</div>
			<div id="did" style="border:1px solid red;width:241px;height:100px;position: relative;display: none"></div>
		
		
		</div>
	
	</center>

</body>
</html>

servlet

package com.huida.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.huida.service.KeyWordService;


public class SearchServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//0设置编码
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		
		//1.获取参数
		String kw = request.getParameter("kw");
		//System.out.println(kw);
		//service  //dao   a  
		//2.调用service完成模糊操作 返回值list
		List<Object> list = new KeyWordService().findKw4Ajax(kw);
		//3.将数据集合[a,aa,aaa]遍历返回给search.jsp
		if(list!=null&&list.size()>0){
			String str = list.toString();
			str =str.substring(1, str.length()-1);
			//System.out.println(str);
			response.getWriter().println(str);
			
		}
		
		
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		doGet(request, response);
	}

}

service

package com.huida.service;

import java.util.List;

import com.huida.dao.KeyWordDao;

public class KeyWordService {

	public List<Object> findKw4Ajax(String kw){
		
		
		return new KeyWordDao().findKw4Ajax(kw);
	}
}

dao

package com.huida.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ColumnListHandler;

import com.huida.utils.DataSourceUtils;



public class KeyWordDao {
public List<Object> findKw4Ajax(String kw){
		
		QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select kw from keyword where kw like ? limit 5";
		
		
		try {
			return qr.query(sql, new ColumnListHandler("kw"),"%"+kw+"%");
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

}

ajax完成仿浏览器搜索框输入部分内容提示

猜你喜欢