Question

I’m sending post request and replace the current html body with the response body.
the problem is that the input text does not clear on mouse click and no autocomplete is available.

I’m using autocomplete library.

This code works when the response is from the server without any modifications to the body.

this is the relevant code:

$(document).ready(function() { 
    $('input, textarea').each(function () {
    if ($(this).val() == '') {
        $(this).val($(this).attr('Title'));
    }
}).focus(function () {
    $(this).removeClass('inputerror');
    if ($(this).val() == $(this).attr('Title')) {
        $(this).val('');
    }
}).blur(function () {
    if ($(this).val() == '') {
        $(this).val($(this).attr('Title'));
    }
});
};

window.onload = function()
{
$("#search_type").autocomplete("/company/autocomplete/",{
    minChars: 2
 });
};

This seems to work but the blur function always executed after click to the value is not clear:

    $('input, textarea').live('click',function() {
     // CLEAR INPUT VALUE  ---------------------------------------------------------------------------------------------------
    $('input, textarea').each(function () {
        if ($(this).val() == '') {
            $(this).val($(this).attr('Title'));
        }
    }).focus(function () {
        $(this).removeClass('inputerror');
        if ($(this).val() == $(this).attr('Title')) {
            $(this).val('');
        }
    }).blur(function () {
        if ($(this).val() == '') {
            $(this).val($(this).attr('Title'));
        }
    });
});

Answer 1

After replacing the HTML, you need to call autocomplete() again if you’ve replaced the DOM element that it was originally bound to.