jQuery自动完成选择功能只完成一项答案

【问题标题】：JQuery Autocomplete Select Function Only Completes One ItemjQuery自动完成选择功能只完成一项
【发布时间】：2014-08-18 01:13:23
【问题描述】：

我正在使用 jquery 自动完成功能从数据库中获取项目并替换字段。使用 select 函数和一些 AJAX 它将当前信息替换为所需的信息。但是，我需要它运行两次，而自动完成似乎只运行了 select 函数中的最后一行：

 $(document).ready(function($){
    $('#client_name').autocomplete({
    source:'suggest_client.php', 
    minLength:2,
    select: function (event, ui) {
        $("#client_name").val(ui.item.label); // display the selected text
        $("#client_nameID").val(ui.item.value); // save selected id to hidden input
        var clientValue = ui.item.value;
        getAjax(clientValue, 'client_replace', 'client_info.php?client_id=', "");
        getAjax(clientValue, 'client_contact_div', 'get_contact.php?client_key=', "");
        return false;
        }
    });
});

getAjax 代码：

function getAjax(seek, getId, destUrl, reset) {
    if (seek=="") {
        document.getElementById(getId).innerHTML=reset;
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById(getId).innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET",destUrl+seek,true);
    xmlhttp.send();
}

【问题讨论】：

我感觉这是getAjax() 函数的问题。你能发布它的来源吗？
添加了 getAjax() 的代码，它可以用于其他几个目的，但我没有尝试像上面那样调用它两次。

标签： javascript jquery ajax autocomplete

【解决方案1】：

问题出在getAjax() 函数上。在函数的最开始，需要声明xmlhttp变量：

function getAjax(seek, getId, destUrl, reset) {
    var xmlhttp;
    /* ... */
}

说明

问题在于变量范围。在getAjax() 函数中，您将一个值分配给xmlhttp 变量而不首先声明它（使用var 关键字）。根据MDN's documentation on the var keyword：

给一个未声明的变量赋值会在赋值执行时隐式地把它创建为一个全局变量（它成为全局对象的一个属性）。

因此，每次调用getAjax() 时，您都会为xmlhttp 分配一个值（XMLHttpRequest 或ActiveXObject），因为它从未被声明过，所以它被视为全局变量。因此，当对getAjax() 的第二次调用在select 回调的最后一行运行时，它会在第一次请求有机会完成之前覆盖第一次调用中的xmlhttp 变量。

如果您在函数开头使用var xmlhttp 声明变量，那么每次调用getAjax() 都会有它自己的实例 xmlhttp 变量，防止它被处理作为全局变量并被覆盖。

【讨论】：

成功了。我欠你一杯啤酒。非常感谢。