改代码实现ajax得到结果并且显示出结果，如截图：
-
<html>
-
<title>ajax autocomplete</title>
-
<head>
-
<style type="text/css" media="screen">
-
.onmouset_out{
-
background-color: #99CCFF;
-
padding: 2px 6px 2px 6px;
-
}
-
.onmouset_over{
-
background-color: #006600;
-
padding: 2px 6px 2px 6px;
-
}
-
#result_display{
-
border: 1px solid #FFFFFF;
-
}
-
</style>
-
-
<script type="text/javascript">
-
var xmlHttp;
-
function createXMLHttp(){
-
if(window.XMLHttpRequest){
-
xmlHttp = new XMLHttpRequest();
-
}
-
else{
-
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
-
}
-
}
-
function ajaxSearch(){
-
var txtValue = document.getElementById("tags").value;
-
if(txtValue.length<2){
-
return ;
-
}
-
if(Trim(txtValue) == ""){
-
document.getElementById('result_display').style.visibility = "hidden";
-
return;
-
}
-
createXMLHttp();
-
// var url = "/servlet/searchhylx&zymc=" + encodeURI(encodeURI(txtValue));
-
var url = "/servlet/searchZylx";
-
xmlHttp.open("POST", url, true);
-
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
-
xmlHttp.onreadystatechange = _handle;
-
xmlHttp.send("zymc="+txtValue);
-
}
-
function _handle(){
-
if(xmlHttp.readyState == 4){
-
if(xmlHttp.status == 200){
-
var str = xmlHttp.responseText;
-
//str的返回值其实形式为：["aa","bb","cc"]
-
str=eval(str);
-
var s = document.getElementById('result_display');
-
s.innerHTML = '';
-
}
-
if(str.length > 0){
-
document.getElementById('result_display').style.visibility = "visible";
-
}
-
for(i = 0; i < str.length; i++){
-
var suggest = '
;
-
suggest += 'onmouseout="onmouseOut(this);"';
-
suggest += 'onclick="setSuggestValue(this.innerHTML);"';
-
suggest += 'class="onmouset_out">' + str[i] + '
';
-
s.innerHTML += suggest;
-
}
-
}
-
}
-
function Trim(str){
-
str += "";
-
while( (str.charAt(0)==' ')||(str.charAt(0)==' ')||(escape(str.charAt(0))=='%u3000') )
-
str=str.substring(1,str.length);
-
while( (str.charAt(str.length-1)==' ')||(str.charAt(str.length-1)==' ')||(escape(str.charAt(str.length-1))=='%u3000') )
-
str=str.substring(0,str.length-1);
-
return str;
-
}
-
function onmouseOver(div) {
-
div.className = 'onmouse_over';
-
}
-
function onmousetOut(div) {
-
div.className = 'onmouset_out';
-
}
-
function setSuggestValue(value) {
-
document.getElementById('tags').value = value;
-
document.getElementById('result_display').innerHTML = '';
-
document.getElementById('result_display').style.display="none";
-
}
-
</script>
-
</head>
-
<body>
-
<div class="ui-widget">
-
<label for="tags">Tags: </label>
-
<input id="tags" onkeyup="ajaxSearch()">
-
<div id="result_display" style="width:200px;visibility:hidden">
-
</div>
-
</body>
-
</html>
阅读(2911) | 评论(1) | 转发(0) |
