天天看點

原生ajax + jsp +servlet +javabean 搜尋框智能提示并寫入

#jsp頁面

<script type="text/javascript" src="${pageContext.request.contextPath }/js/my.js"></script>

<script type="text/javascript">
window.onload = function() {
//得到文本框對象
var offer=document.getElementById("offer");
//擷取div元素
var div = document.getElementById("context1");
offer.onkeyup = function(){//給檔案框注冊按鍵彈起事件
//擷取文本框的值
var offer=this.value;
//如果文本框不沒有資料時,把div隐藏,且不向伺服器發送請求
if(offer==""){
div.style.display="none";
return;
} 
//獲得xhr對象
var xhr = getXMLHttpRequest();
//處理結果
xhr.onreadystatechange = function(){
if(xhr.readyState==4){//請求一 切正常
if(xhr.status==200){//伺服器響應一切正常
var str = xhr.responseText;//得到伺服器傳回的資料
var ss = str.split(","); // 把字元串 1001,1002,1003 截成數組
var childDivs = "";
//循環把資料放入小的div中
for(var i=0;i<ss.length;i++){
childDivs+="<div onclick='writeText(this)' onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)'>"+ss[i]+"</div>";//把數組中的每個元素放到div中
}

div.innerHTML= childDivs;//把多個childDivs(div)放入清單div中
div.style.display="block";//把清單隐藏
}
}
};

xhr.open("get","${pageContext.request.contextPath}/servlet/machineAJAXServlet?method=firm&offer="+encodeURI(encodeURI(offer))+"&time="+new Date().getTime());

xhr.send(null);
};
};

//滑鼠懸浮時,改變背景色
function changeBackground_over(div){
div.style.backgroundColor = "gray";
}
//滑鼠離開時,恢複背景色
function changeBackground_out(div){
div.style.backgroundColor = "";
}

//填充文本到搜尋框
function writeText(div){
//得到搜尋框
var searchElement = document.getElementById("offer");
searchElement.value = div.innerHTML;//把div中的文本添加到搜尋框中
div.parentNode.style.display="none";//把context1的div隐藏
}
</script>
</head>


<body style="margin: 0;">
<form action="${pageContext.request.contextPath }/servlet/addfirmServlet?method=list" method="post">
<table align="center"  cellpadding="0" cellspacing="0" >
<tr align="center" height="100px">
<td height="30"   class="ta_01">請輸入公司名稱:</td>
<td><input type="text" name="offer" id="offer" autocomplete="no" ></td>
<td>&nbsp;&nbsp;&nbsp;<input type="submit" id="search" name="search" value="查詢"                                                     class="button_view"></td>
</tr>

</table>

        </form>

<div id="context1" style="display:block;border:1px solid white;background-color:white; width:148px;position:absolute;left:765px;top:113px;">
</div>

</body>
           

#dao層

public List<Object> searchCompany(String offer) throws SQLException {
QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
return qr.query("select offer from company where offer like ?", new ColumnListHandler(),"%"+offer+"%");

}
           

#service層

public List<Object> searchByName(String offer) {
try {
return machineDao.searchCompany(offer);
} catch (SQLException e) {
e.printStackTrace();
}
return null;

}
           

#servlet

    private MachineService service =new MachineServiceImpl();

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

                request.setCharacterEncoding("UTF-8");//隻能解決post方式的亂碼
response.setContentType("text/html;charset=UTF-8");

String offer = request.getParameter("offer");
// offer = new String(offer.getBytes("iso-8859-1"),"UTF-8");
offer=URLDecoder.decode(offer, "UTF-8");
List<Object> list = service.searchMachineByName(offer);
System.out.println("offer="+offer);
//把集合中的資料轉換為字元串傳回到網頁
String str = "";
for (int i = 0; i < list.size(); i++) {
if(i>0){
str+=",";
}
str+=list.get(i);
}

System.out.println(str);
//把資料響應到用戶端

response.getWriter().write(str);

}
           

繼續閱讀