Question

i have a problem..

I use the autocomplete plugin, that i edite for make the input text to disappear when the user make the choice.

So, my goal is, when the user select a row from the autocomplete list:

1. An Ajax request would retrieve additional info about the selected row (no problem here)
2. A form auto-fillup with those additional info (ok here)
3. The input-text with the autocomplete disappear, and at it place i put 2 div, one with a X inside (to ‘deselect’ the previus selection), and another with some short info about the selection itself (no problems here)
4. If the user click the X div, all must be return as the begin, with the input-text with autocomplete.

What happen to me, is that at the point 4, all works fine, but when the input-text with autocomplete is recreated by

$("div#contact-list-container").html('<input type="text" name="contact-list" id="contact-list" value="" />');

the autocomplete wont work anymore!

So, how can i join the autocomplete function to the field when it is recreated? In order to let the user select and deselect it many times.

p.s: I know that i could simply hide the div with the input-text and show the one with the X, but i’ll prefer to keep the html markup minimal and dont mess around with hidden divs.
If is possible, i’ll like to change the innerHTML on every select and reassociate the autocomplete function.

Thats how my cose is now:

$(document).ready(function(){
    $('input#contact-list').autocomplete('test-db.php', {
        multiple: false,
        dataType: "json",
        width: 400,
        scrollHeight: 300,
        max: 5,
        parse: function(data) {
            return $.map(data, function(row) {
                return {
                    data: row,
                    value: row.azienda,
                    //result that will be used in the text field, while selected
                    result: row.code + ' - ' + row.company + ' | ' + row.name + ', ' + row.surname
                }
            });
        },
        formatItem: function(item) {
            return item.code + ' - ' + item.company + '<br />' + item.name + ', ' + item.surname + '<br />' + item.email;
        }
    }).result(function(e, item) {
        //this will be triggered when the selection has made
        $.ajax({
            type: "POST",
            cache: false,
            data: "idCompany=" + item.id_company + "&idUser=" + item.id_user,
            url: "test-db-02.php",
            success: function(message){
                $("input[rel='ship']").attr("readonly", true).css("background-color", "#DFDFDF");
                $("input[rel='company']").attr("readonly", true).css("background-color", "#DFDFDF");
                var rd = json_parse(message);

                $("input#ship-nome-referente").val(rd.company.nome);
                $("input#ship-cognome-referente").val(rd.company.cognome);
                //[... and so on, i change the val of many fields..]
                //REPLACE THE INPUT-TEXT WITH THE DIVS
                $("div#contact-list-container").html('<div id="deselect-contact">X</div><div id="selected-contact">' + rd.company.code + ' - ' + rd.company.company + ' | ' + rd.company.name + ', ' + rd.company.surname + '</div>');

                $("div#deselect-contact").click(function(){
                //REPLACE THE DIVS WITH THE INPUT-TEXT.. HOW TO REASSOCIATE THE AUTOCOMPLETE?
                    $("div#contact-list-container").html('<input type="text" name="contact-list" id="contact-list" value="" />');
                    $("input[rel='ship']").attr("readonly", false).css("background-color", "#FFFFFF").val('');
                    $("input[rel='company']").attr("readonly", false).css("background-color", "#FFFFFF").val('');
                });
            }
        });
    });
});

Answer 1

Since jQuery 1.3 the live() event has had the required functionality, which allows you to persistently bind events to handles, even if the handles get destroyed and recreated.

Edit: live was deprecated in jQuery 1.7 and removed in 1.9, so now you should use on() instead to achieve the same effect.

See http://api.jquery.com/on/ for details.