I am using this code but I need to customize it so that it does not append results into a span or the div I just want text straight into the messageTo field. Can anyone help me with this?

$(function(){

//attach autocomplete

$("#messageTo").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.username);

});

//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

}).text("x").appendTo(span);

//add friend to friend div

span.insertBefore("#messageTo");

},

//define select handler

change: function() {

//prevent 'to' field being updated and correct position

$("#messageTo").val("").css("top", 2);

}

});

//add click handler to friends div

$("#friends").click(function(){

//focus 'to' field

$("#messageTo").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) {

$("#messageTo").css("top", 0);

}

});

});