多个自动完成下拉列表无效

时间:2012-12-05 05:41:27

标签: javascript jquery ajax autocomplete

当我有一个字段的一个自动完成下拉列表时,一切正常,但是当我为更多字段添加更多下拉列表时,输入字段的值不再填充从php文件返回的li文本,这是称为

以下工作原理.sugnorm1是li的类

var delay = (function () {
var timer = 0;
return function (callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
};
})();
$(document).ready(function () {
$('#quality1').bind('input propertychange', function () {
    delay(function () {
        $.post("functions/autocomplete.php", {
            quality:$(this).val(),
            questionname:"<?php echo $_SESSION['question']; ?>",
            count:1
        }, function (response) {
            $('#qualitySuggest1').hide();
            setTimeout("finishAjax('qualitySuggest1', '" + escape(response) + "')", 20);
        });
        return false;
    }, 20);
});
});

$('.sugnorm1').live("mouseover mouseout click", function(event) {
    if ( event.type == "mouseover" ) {
        $(this).addClass('sughover');
    } else if ( event.type == "click") {
        $("#quality1").val($(this).text());
        $("#qualitySuggest1").hide();
    }
    else {
        $(this).removeClass('sughover');
    }
});

$("#quality1").blur(function () {
    $("#qualitySuggest1").hide();
});


});
function finishAjax(id, response) {
$('#' + id).html(unescape(response));
$('#' + id).show();
} //finishAjax

但是,如果我添加另一个字段,质量建议.hide()被调用,但我无法获得任何其他信息,例如在event.type ==中点击两个字段的警报。

var delay = (function () {
var timer = 0;
return function (callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
};
})();
$(document).ready(function () {
$('#quality1').bind('input propertychange', function () {
    delay(function () {
        $.post("functions/autocomplete.php", {
            quality:$(this).val(),
            questionname:"<?php echo $_SESSION['question']; ?>",
            count:1
        }, function (response) {
            $('#qualitySuggest1').hide();
            setTimeout("finishAjax('qualitySuggest1', '" + escape(response) + "')", 20);
        });
        return false;
    }, 20);
});
$('#quality2').bind('input propertychange', function () {
    delay(function () {
        $.post("functions/autocomplete.php", {
            quality:$(this).val(),
            questionname:"<?php echo $_SESSION['question']; ?>",
            count:2
        }, function (response) {
            $('#qualitySuggest2').hide();
            setTimeout("finishAjax('qualitySuggest2', '" + escape(response) + "')", 20);
        });
        return false;
    }, 20);
});
});

$('.sugnorm1').live("mouseover mouseout click", function(event) {
    if ( event.type == "mouseover" ) {
        $(this).addClass('sughover');
    } else if ( event.type == "click") {
        $("#quality1").val($(this).text());
        $("#qualitySuggest1").hide();
    }
    else {
        $(this).removeClass('sughover');
    }
});

$("#quality1").blur(function () {
    $("#qualitySuggest1").hide();
});

$('.sugnorm2').live("mouseover mouseout click", function(event) {
    if ( event.type == "mouseover" ) {
        $(this).addClass('sughover');
    } else if ( event.type == "click") {
        $("#quality2").val($(this).text());
        $("#qualitySuggest2").hide();
    }
    else {
        $(this).removeClass('sughover');
    }
});
$("#quality2").blur(function () {
    $("#qualitySuggest2").hide();
});


});
function finishAjax(id, response) {
$('#' + id).html(unescape(response));
$('#' + id).show();
} //finishAjax

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我的点击事件在模糊事件后被调用,因此隐藏了建议下拉列表。我通过将click事件更改为mousedown来解决这个问题。然后在模糊之前调用Mousedown。