我有一个文本字段。当我在文本字段中输入内容时,我想将内容加载到下面的 DIV 中。这就是我的等效代码:
<input type="text" onkeyup="/* I am not sure how it's done, but I'll just write: */ document.getElementById('search_results').innerHTML = getContents('search.php?query='+this.value);" /><br/>
<div id="search_results"></div>
希望你能帮忙。提前致谢!
编辑:如果解决方案不涉及使用 jQuery,我将不胜感激 - 只要可能。
回答:我是怎么做的:
<input type="text" onkeyup="loadSearchResults(this.value)" /><br/>
<div id="search_results"></div>
<script>
function loadSearchResults(query){
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("search_results").innerHTML=xmlhttp.responseText;
}else if(xmlhttp.readyState>=1 && xmlhttp.status==200){
// show the ajax loader or stuff like that...
}
}
xmlhttp.open("GET","search.php?search="+query,true);
xmlhttp.send();
}
</script>
对于 AJAX 项目,从像这样的库开始jQuery http://jquery.com/。它将为您处理大量工作。
使用 jQuery,步骤如下:
-
Use the 阿贾克斯命令 http://api.jquery.com/jQuery.ajax/从您的服务器检索数据。
$.ajax({
url: 'search.php',
data: "query=search_terms",
success: finished(data));
-
使用如下函数更新结果上的 div:
function finished(result) {
$('#search_results').innerHTML(result);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)