Используйте AJAX для загрузки содержимого веб-страницы в DIV

Question

У меня есть текстовое поле. Когда я набираю что-то в текстовое поле, я хочу загрузить вещи в 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>

Answer 1

Для проектов AJAX начните с такой библиотеки, как jQuery . Он будет выполнять большую часть работы за вас.

При использовании jQuery шаги будут выглядеть примерно так:

1. Используйте команду ajax для получения данных с вашего сервера.

   $.ajax({
     url: 'search.php',
     data: "query=search_terms",
     success: finished(data));

2. обновить результат в div, используя такую ​​функцию, как:

   <code>
   function finished(result) {
       $('#search_results').innerHTML(result);
   }

Answer 2

Вы бы сделали что-то вроде:

$("#inputid").keyup(function(evt) {
    $("#search_results").load("/getresults.php", {queryparam: evt.target.value});
});

Конечно, в конечном итоге все будет сложнее. Возможно, вы не хотите отправлять запрос на сервер при каждом нажатии клавиши. Что произойдет, если серверу потребуется много времени для ответа? Должны ли вы предоставить какое-либо указание на то, что выполняется запрос к серверу?

Если вы используете jQueryUI, вы можете использовать виджет автозаполнения , который может приблизить вас к желаемому конечному результату.