Question

I’m trying my best to make this make sense, but basically I have a text input, and when the user types something in and presses the enter key, jQuery searches through an XML document to find a match, and output its contents. It works perfectly when you first try it, but, oddly enough, it only works correctly every other time. So, on the first try, it will output the correct text, on the second, it will act as if it hasn’t found a match (even though it should), and on the third, it works again. This pattern repeats. I have no idea where to begin solving this one, so does anyone have any ideas? Here’s my code:

$("#helpopen input").bind('keypress', function(e) {
if (e.keyCode==13) {
    var typed = $("#helpopen input").val();
    $("#openresult").slideUp(function() { $(this).remove(); });
    $("#aniloa").show().animate({ opacity: 1 });

    $.get('/wp-content/themes/kymt/style/js/filetypes.xml', function(d) {
        $(d).find('ext').each(function() {

            var $ext = $(this);
            var curext = $ext.attr("type");
            var curtext = $ext.text();

            if (typed == curext) {
                $("#helpopen div div").append("<p id='openresult' style='display:none'><strong>A ."+typed+" file...</strong><br />"+curtext+"</p>");
                $("#openresult").slideDown();
                return false;
            }

        });
    });

    $("#aniloa").animate({ opacity: 0 }, function() { $(this).hide(); })
}
});

“#aniloa” refers to a simple gif that indicates loading, “#openresult” is a p element that contains the outputted text from the XML document, and “#helpopen div div” is the parent of “#openresult.”

Answer 1

To keep the slide animation, use:

$("#openresult").slideUp();

instead of:

$("#openresult").slideUp(function() { $(this).remove(); });