tags:

views:

15

answers:

0
$(function(){      
    //attach autocomplete
    $("#to").autocomplete({              
        //define callback to format results
        source: function(req, add){              
            //pass request to server
            $.getJSON("friends.php?callback=?", req, function(data) {                              
                    //create array for response objects
                    var suggestions = [];                              
                    //process response
                    $.each(data, function(i, val){                                                          
                            suggestions.push(val.name);
                    });                              
                    //pass array to callback
                    add(suggestions);
            });
        },              
        //define select handler
        select: function(e, ui) {                      
            //create formatted friend
            var friend = ui.item.value,
                    span = $("<span>").text(friend),
                    a = $("<a>").addClass("remove").attr({
                            href: "javascript:",
                            title: "Remove " + friend
                    });                      
            //add friend to friend div
            span.insertBefore("#to");
        },              
        //define select handler
        change: function() {                      
            //prevent 'to' field being updated and correct position
            $("#to").val("").css("top", 2);
        }
    });
    //add click handler to friends div
    $("#friends").click(function(){              
        //focus 'to' field
        $("#to").focus();
    });

    //add live handler for clicks on remove links
    $(".remove", document.getElementById("friends")).live("click", function(){      
        //remove current friend
        $(this).parent().remove();              
        //correct 'to' field position
        if($("#friends span").length === 0) {
                $("#to").css("top", 0);
        }                               
    });                             
});

i saw some code like this in

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

. i did not get to know wht is source means and i need to modify this a bit like after selection of a thing from list also..the user must be able to edit the autocompleted stuff. here he is adding it like a span before textarea. how do i allow the user to still edit autocompleted word ?