更新时间:2023-12-05 09:53:04
有关AJAX项目开始与像 jQuery的库。它可以处理大量的工作给你。
使用jQuery的步骤是这样的:
使用 AJAX命令检索您的服务器的数据。
$。阿贾克斯({
网址:'search.php中,
数据:查询= SEARCH_TERMS
成功:完成(数据));
更新使用功能,像结果DIV:
功能完成的(结果){
$('#search_results)的innerHTML(结果)。
}
I have a text field. When I type something into than text field, I want to load stuff into the DIV below. That's my code equivalent:
<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>
Hope you can help. Thanks in advance!
EDIT: I would appreciate it if the solution did not involve using jQuery - as long as it's possible.
ANSWER: How I'm doing it:
<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>
For AJAX projects start with a library like jQuery. It will handle a great deal of the work for you.
Using jQuery the steps would be something like:
Use the ajax command to retrieve the data from your server.
$.ajax({
url: 'search.php',
data: "query=search_terms",
success: finished(data));
update the div on result using a function like:
function finished(result) {
$('#search_results').innerHTML(result);
}