1.提供一個servlet，動態的查詢包含數據
publicclass AutoServlet extends HttpServlet {
privatestatic finallong serialVersionUID= 1L;
private List<String>list =new ArrayList<String>();
@Override
publicvoid init() throws ServletException {
//模擬數據庫
for (int i = 1; i <=100; i++) {
String id = UUID.randomUUID().toString().replace("-","");
id=id.substring(0,10);
list.add(id);
}
}
@Override
publicvoid doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException,IOException {
doPost(req,resp);
}
publicvoid doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException {
request.setCharacterEncoding("UTF-8");
//獲取用戶提交的數據
String code = request.getParameter("code");
//list哪些有這個字符
//聲明一個準備返回的list
List<String> res = newArrayList<String>();
for(String k:list){
if(k.contains(code)){
res.add(k);
}
}
//返回res
response.setContentType("text/html;charset=UTF-8");
//轉成json
String json = JSONArray.toJSONString(res);
System.err.println("json is:"+json);
response.getWriter().print(json);
}
}
2：請求測試：
2.1.1（用的select顯示）在ajax中發請求
<scripttype="text/javascript"src="<c:urlvalue='/js/xhr2.js'/>"></script>
<styletype="text/css">
#sel{
position:absolute;
top:32px;
left:74px;
visibility:hidden;
}
</style>
</head>
<body>
請輸入：<inputtype="text"onkeyup="_show(this);"name="msg"><br/>
<selectid="sel"style="width:153px;height:200px;"size="6"ondblclick="_sel(this);">
</select>
</body>
<scripttype="text/javascript">
function_show(obj){
if(obj.value==""){
document.getElementById("sel").style.visibility="hidden";
}else{
var sel = document.getElementById("sel");
//刪除以前的數據
sel.options.length=0;
//請求後臺的數據
var ajax =newAjax();
ajax.post({
url:"<c:url value='/AutoServlet'/>",
param:"code="+obj.value,
succ:function(data){
for (var i = 0; i < data.length; i++) {
var txt = data[i];
//聲明一個options
var opt=new Option(txt,txt);
sel.options.add(opt);
}
if(sel.options.length>0){
sel.style.visibility="visible";
}else{
sel.style.visibility="hidden";
}
},
xtype:"json"
});
}
}
function_sel(sl){
var index = sl.selectedIndex;
var opt= sl.options[index];
//獲取前面的文本
var txt = opt.innerHTML;
document.getElementsByName("msg")[0].value=txt;
sl.style.visibility="hidden";
}
</script>
</html>
2.1.2效果圖
2.2.1（用的div顯示）在ajax中發請求div_auto.jsp
<script type="text/javascript" src="<c:url value='/js/xhr2.js'/>"></script>
<style type="text/css">
#sel{
position:absolute;
top:32px;
left:74px;
overflow:scroll;
}
#sel div{
margin:2px;
color:blue;
cursor:hand;
width:100%;
font-size:10pt;
border:1px dotted gray;
}
</style>
</head>
<body>
請輸入：<input type="text"onkeyup="_show(this);"name="msg"><br/>
<div id="sel" style="width: 200px;height:200px;" ondblclick="_sel();"></div>
</body>
<script type="text/javascript">
function_show(obj){
if(obj.value==""||obj.value==null){
document.getElementById("sel").style.visibility="hidden";
}else{
//獲取 div元素
var sel = document.getElementById("sel");
//判斷div中的元素的個數
var len = sel.childNodes.length;
//刪除div中的所有子元素
for(vari=len-1;i>=0;i--){
sel.removeChild(sel.childNodes[i]);
}
//準備請求ajax
var ajax = newAjax();
ajax.post({
url:"<c:url value='/AutoServlet'/>",
param:"code="+obj.value,
succ:function(data){
for(vari=0;i<data.length;i++){
var txt = data[i];
//創建div
var div = document.createElement("<DIV>");
//設置紅色字體
txt =txt.replace(obj.value,"<font color=red>"+obj.value+"</font>");
// 添加文本
div.innerHTML=txt;
//添加到div中去
sel.appendChild(div);
}
//判斷是否顯示
if(sel.childNodes.length>0){
sel.style.visibility="visible";
}else{
sel.style.visibility="hidden";
}
},
xtype:"json"
});
}
}
</script>
</html>
2.2.2.效果圖：
