-5

我有一个包含文本字段和按钮的表单。当我开始输入时，它会显示来自我的数据库的提示，并在单击按钮或按 Enter 键时显示搜索结果。AJAX 用于提示和搜索结果，并且运行良好。

问题是它只在页面加载后第一次起作用。如果我想再次搜索，它不会响应。它只是显示以前的搜索结果，直到页面刷新，但该showhint()功能运行良好。

<input type="text" id="txt"  onkeyup="showhint(this.value)"/>
<input type="button" value="search" onclick="searchresult()"/>

AJAX 函数：

function searchresult() {
    var key = document.getElementById("txt").value;
    var xmlhttp;

    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("mid").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open("GET","keyprocess.php?q=" + key, true);
    xmlhttp.send();
}

问题是什么？

4

1 回答 1

5

我猜它第一次或刷新时工作的原因是因为事件处理程序没有在 ajax 请求之间持续存在。我会研究 jQuery，因为它有助于缓解此类问题。

对于 jquery < 1.7 版.delegate()方法执行以下操作

根据一组特定的根元素，将处理程序附加到现在或将来与选择器匹配的所有元素的一个或多个事件。

1.7 之后的任何内容都应该使用.on()方法。

基本上，如果页面上的元素从 ajax 请求发生变化，.delegate() 或 .on() 方法仍然允许处理事件。

更新：

//This needs to be within the $(document).ready function
//Attach an event handler to the ID called txt that fires on changes
$("body").on("change", "#txt", function(event){
    //get the value from the input
    var $val = $(this).val();

    //Send the $val to keyprocess.php via ajax call

    //Output Results

});
于 2012-06-07T18:03:25.070 回答