<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown" style="margin-left: 45%;margin-top: 10%">
<input type="text" class="form-control" id="ajaxtest" data-toggle="dropdown" style="width:200px;">
<ul id="search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"></ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
//隐藏 ul 元素，只是为了美观
$("ul").hide();
//当文本框有键盘输入的时候执行的函数
$("#ajaxtest").keyup(function () {
if($("#ajaxtest").val() == ""){
//如果文本框没有值
//先清空所有的 li ，即候选框
$("li").remove();
//隐藏 ul ，只是为了美观
$("ul").hide();
return;
}
//定义一个url 也就是请求
var url = "search";
$.get(url,
{keyword:$("#ajaxtest").val()},
function(data){
//先清空所有的 li ，即候选框
$("li").remove();
//遍历从后台取到的JSON数据
for(var i=0;i<data.length;i++){
//循环添加li节点
$("#search").append("<li role='presentation'><a role='menuitem' tabindex='-1' href='javascript:void(0)'>"+data[i]+"</a></li>");
//显示 ul 节点
$("ul").show();
//实现点击候选框的值，文本框的值被关联的效果
$("ul li a").mousedown(function () {
$("#ajaxtest").val($(this).text());
$("ul").hide();
});
}
},
"json");
})
});
</script>
</body>
</html>超级简单的实现搜索框智能提示 JQuery+Servlet
猜你喜欢
转载自blog.csdn.net/hlyy8_2018/article/details/81808473
今日推荐
周排行