官网：http://jqueryui.com/demos/autocomplete/
我们实现这个功能要借助于jquery.autocomplete控件
-
我们还可以根据实际情况添加可选项：
$("#website").autocomplete(websites,{
max: 12, //列表里的条目数
width: 400, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //是否自动填充
});
<%@ 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>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript">
function change()
{
url="changeSerlvet";
setTimeout($.get(url,function(data) {
$("#website").autocomplete(data,{});
}),3000);
}
</script>
<link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="text" id="website" οnkeyup="change();" />
</body>
</html>
后台代码
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
List<String> list = new ArrayList<String>();
list.add("1");
list.add("12");
list.add("123");
list.add("1234");
list.add("12345");
list.add("2");
list.add("23");
list.add("234");
list.add("2345");
list.add("23456");
Gson gson = new Gson();
String str = gson.toJson(list);
resp.setContentType("text/json");
resp.getWriter().write(str);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(req,resp);
}
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
