Question

When I have one autocomplete dropdown for one field everything works fine, however when I add more dropdowns for more fields the value of the input fields is no longer populated with the text of the li which is returned from the php file which is called

The following works where .sugnorm1 is the class of the 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

However if I add another field the quality suggest .hide() is called but I can’t get anything else such as an alert to work in the event.type == click for both of the fields.

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

Thanks for your help!

Answer 1

My click event was being called after the blur event, thus the suggestion dropdown was hidden. I solved this by changing my click event to mousedown. Mousedown will then be called before blur.