要解决AJAX实时搜索框中内容不完整的问题,可以使用以下代码示例:
HTML代码:
JavaScript代码:
function searchFunction() {
var input = document.getElementById("search").value;
var xmlhttp;
if (input.length == 0) {
document.getElementById("searchResults").innerHTML = "";
return;
}
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("searchResults").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "search.php?q=" + input, true);
xmlhttp.send();
}
上述代码中,当用户输入内容时,会触发 searchFunction()
函数。该函数首先获取输入框中的值,并检查是否为空。如果为空,则清空搜索结果,并返回。如果不为空,则创建一个XMLHttpRequest对象,并定义其 onreadystatechange
事件处理函数。
当 readyState
为4且 status
为200时,表示请求已成功返回。此时,将服务器响应的文本内容赋值给 searchResults
元素的 innerHTML
属性,以显示搜索结果。
在上述代码中,需要将 search.php
替换为实际的服务器端脚本文件,该脚本负责处理搜索请求,并返回相应的搜索结果。