做一个从远程获取数据的文本补全框（类似百度、谷歌搜索框）
使用框架：jQuery-ui
2017-03-24
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <body> <script type="text/javascript"> $(".m-text").keyup(tz_key);//监听文本框按键事件 function tz_key(){ var value=$(this).val(); //为空时不调用ajax if(value == " "||value.length == 0||value==null){ return; }else{ $.post("GetChartData", { name: value },function(data){ var dat=eval(data); var availableTags = dat;//将获取数据填入备选框 $( ".m-text" ).autocomplete({ source: availableTags }); },"text"); //这里格式要注意，json、xml什么都可以，我直接返回文本 <div class="m-top"> <form class="m-form"> <label>标签:</label> <input type="text" name="name" id="name" class="m-text"> <input type="button" onclick="dos()" value="确定" class="m-btn"> </form> </div> </body> </html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成（Autocomplete</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
<script type="text/javascript">
$(".m-text").keyup(tz_key);//监听文本框按键事件
function tz_key(){
var value=$(this).val();
//为空时不调用ajax
if(value == " "||value.length == 0||value==null){
return;
}else{
$.post("GetChartData", { name: value },function(data){
var dat=eval(data);
var availableTags = dat;//将获取数据填入备选框
$( ".m-text" ).autocomplete({
source: availableTags
});
},"text"); //这里格式要注意，json、xml什么都可以，我直接返回文本
<div class="m-top">
<form class="m-form">
<label>标签:</label>
<input type="text" name="name" id="name" class="m-text">
<input type="button" onclick="dos()" value="确定" class="m-btn">
</form>
</div>
</body>
</html>
这里特别注意的是GetChartData是我servlet拦截的地址，里面返回的参数必须是数组
所以在Servlet中可以通过拼接字符串，类似：["标签1","标签2","标签三"]
需要引入的js文件以及css文件链接：https://files.cnblogs.com/files/ysj4428/jquery-ui-1.10.4%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8.zip