Javascript 多个自动完成下拉列表不起作用

当我为一个字段添加一个自动完成下拉列表时，一切正常，但是当我为更多字段添加更多下拉列表时，输入字段的值不再填充从调用的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

var delay=（函数（）{
var定时器=0；
返回函数（回调，毫秒）{
清除超时（计时器）；
定时器=设置超时（回调，毫秒）；
};
})();
$（文档）.ready（函数（）{
$（'#quality1'）.bind（'input propertychange'，function（）{
延迟（函数（）{
$.post（“functions/autocomplete.php”{
质量：$（this.val（），
问题名称：“，
计数：1
}，功能（回应）{
$（'#qualitySuggest1'）.hide（）；
setTimeout（“finishAjax（'qualitySuggest1'，'”+转义（响应）+'”），20）；
});
返回false；
}, 20);
});
});
$（'.sugnorm1'）.live（“鼠标悬停”点击），函数（事件）{
如果（event.type==“mouseover”）{
$（this.addClass（'sughover'）；
}else if（event.type==“单击”）{
$（“#quality1”）.val（$（this.text（））；
$（“#qualitySuggest1”）.hide（）；
}
否则{
$（this.removeClass（'sughover'）；
}
});
$（“#质量1”）.blur（函数（）{
$（“#qualitySuggest1”）.hide（）；
});
});
函数finishAjax（id，响应）{
$（'#'+id）.html（unescape（response））；
$（'#'+id）.show（）；
}//finishAjax

但是，如果我添加了另一个字段，则会调用quality suggest.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

var delay=（函数（）{
var定时器=0；
返回函数（回调，毫秒）{
清除超时（计时器）；
定时器=设置超时（回调，毫秒）；
};
})();
$（文档）.ready（函数（）{
$（'#quality1'）.bind（'input propertychange'，function（）{
延迟（函数（）{
$.post（“functions/autocomplete.php”{
质量：$（this.val（），
问题名称：“，
计数：1
}，功能（回应）{
$（'#qualitySuggest1'）.hide（）；
setTimeout（“finishAjax（'qualitySuggest1'，'”+转义（响应）+'”），20）；
});
返回false；
}, 20);
});
$（'#quality2'）.bind（'input propertychange'，function（）{
延迟（函数（）{
$.post（“functions/autocomplete.php”{
质量：$（this.val（），
问题名称：“，
计数：2
}，功能（回应）{
$（'#qualitySuggest2'）.hide（）；
setTimeout（“finishAjax（'qualitySuggest2'，'”+转义（响应）+'”），20）；
});
返回false；
}, 20);
});
});
$（'.sugnorm1'）.live（“鼠标悬停”点击），函数（事件）{
如果（event.type==“mouseover”）{
$（this.addClass（'sughover'）；
}else if（event.type==“单击”）{
$（“#quality1”）.val（$（this.text（））；
$（“#qualitySuggest1”）.hide（）；
}
否则{
$（this.removeClass（'sughover'）；
}
});
$（“#质量1”）.blur（函数（）{
$（“#qualitySuggest1”）.hide（）；
});
$（'.sugnorm2'）.live（“鼠标悬停”点击），函数（事件）{
如果（event.type==“mouseover”）{
$（this.addClass（'sughover'）；
}else if（event.type==“单击”）{
$（“#quality2”）.val（$（this.text（））；
$（“#qualitySuggest2”）.hide（）；
}
否则{
$（this.removeClass（'sughover'）；
}
});
$（“#质量2”）.blur（函数（）{
$（“#qualitySuggest2”）.hide（）；
});
});
函数finishAjax（id，响应）{
$（'#'+id）.html（unescape（response））；
$（'#'+id）.show（）；
}//finishAjax

---

谢谢你的帮助

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

jsfiddle不会受伤；）我是JSFIDLE新手，不知道它是如何工作的。我添加了代码，但无法使jquery成功运行。也许额外的代码能帮我解决问题？单击

时，似乎调用了模糊函数而不是单击函数。