ajax+servlet+jQuery实现搜索框智能提示（bootstrap框架）

前台界面代码

<form action="" method="post">
    <div class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" id="txtSearch" name="txtSearch"
                   class="form-control" placeholder="Search" autocomplete="off" /> <input
                type="hidden" value="selectstock" name="method">
            <div id="search-result" class="form-control"></div>
            <br>
        </div>
        <button type="submit" class="btn btn-default">信息查询</button>
    </div>
</form>

 注：使用的是bootstrap框架进行前台设计，需要下载bootstrap相关css文件与js文件，或者链接导入

<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ajax

$(document).ready(function() {
	$("#txtSearch").keyup(function() {
		if ($("#txtSearch").val() == "") {
			$("#search-result").hide();
		} else {
			$.ajax({
				url : "Suggest",
				data : {
					'key' : $("#txtSearch").val()
				},
				type : "Get",
				cache:false,
				success : function(data) {
					var str = data.split(",");
					var lists = "<ul style='list-style:none;text-align:left;'>";
					if (str.length > 0 && str[0].length > 0) {
						for (i = 0; i < str.length; i++) {
							lists += "<li onclick='liClick(this)'>" + str[i] + "</li>";//遍历出每一条返回的数据  
						}
						lists += "</ul>";
						$("#search-result").html(lists).show();//将搜索到的结果展示出来  
					}
				},
				 error: function (XMLHttpRequest, textStatus, errorThrown) {
			         // 状态码
			         alert(XMLHttpRequest.status);
			})
		}
	});
	$('#txtSearch').keydown(function() {
		$("#search-result").hide();
		$('#search-result').empty();
		
	})
	$('#search').blur(function() {
		$('#search-result').empty();
	})
});
function liClick(data){
	$("#search-result").hide();
    $("#txtSearch").val($(data).text());
}

servlet

注：连接数据库读取相关信息

		try {
            //数据库连接查询数据
            .............
            .............
			while (a.next()) {
				string = string + a.getString("列名") + ",";
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		PrintWriter out = response.getWriter();
		out.println(string);

		out.flush();
		out.close();