fadeIn appendTo with ui.item.value

Question

I'm using jQueryUI's autocomplete widget to retrieve subject names from a MySQL database. When the user selects a subject from the autocomplete list, I want to append that subject to #subjects_container, displaying it with fadeIn. My problem seems to be with syntax, although I haven't been able to see my error.

ui.item.value indeed contains what I want to append

function which retrieves the values:

function autocompletejq() {
$( "#autocomplete" ).autocomplete({
    source: "autocomplete.php",
    minLength: 1,
    delay: 0, 
    select: function(event, ui) {
        alert(ui.item.value);
        $( "<input class=\"added_chkboxes\" type=\"checkbox\" checked=\"checked\" />" + ui.item.value + "").appendTo( "#subjects_container" );
    }
});

}

To my dismay, only the checkbox is appended! Perhaps my concatenation is wrong.

Note: hide() and fadeIn() aren't shown here.

Final Solution

Wrap ui.item.value in html tags, here <span> tags:

function autocompletejq() {
$( "#autocomplete" ).autocomplete({
    source: "autocomplete.php",
    minLength: 1,
    delay: 0, 
    select: function(event, ui) {
        alert(ui.item.value);
        $( "<input class=\"added_chkboxes\" type=\"checkbox\" checked=\"checked\" /><span>" + ui.item.value + "</span>" ).appendTo( "#subjects_container" ).hide().fadeIn();
    }
});

}

Answer 1

Regarding the effect part:

$("<p>My new Content</p>").appendTo("#myWrapper").hide().fadeIn();

Regarding object creation: I think you need to wrap your "ui.item.value" inside an html tag, e.g. a span.

All in all I would try sth. like this:

var newHTML = '<input class="added_chkboxes" type="checkbox" checked="checked" />' +      
    '<span>ui.item.value</span>';
$(newHTML).appendTo("#subjects_containe").hide().fadeIn();

Here is a dummy example: http://jsfiddle.net/SunnyRed/dB2uT/

Hope this helps.