How do i create a div when i select an element in typeahead?

Question

Here is my function:

$('input.typeahead').bind('typeahead:selected', function (obj, datum, name){
     alert(JSON.stringify(obj)); // object
     // outputs, e.g., {"type":"typeahead:selected","timeStamp":1371822938628,"jQuery19105037956037711017":true,"isTrigger":true,"namespace":"","namespace_re":null,"target":{"jQuery19105037956037711017":46},"delegateTarget":{"jQuery19105037956037711017":46},"currentTarget":
     alert(JSON.stringify(datum)); // contains datum value, tokens and custom fields
     // outputs, e.g., {"redirect_url":"http://localhost/test/topic/test_topic","image_url":"http://localhost/test/upload/images/t_FWnYhhqd.jpg","description":"A test description","value":"A test value","tokens":["A","test","value"]}
     // in this case I created custom fields called 'redirect_url', 'image_url', 'description'
     alert(JSON.stringify(name)); // contains dataset name
     // outputs, e.g., "my_dataset"
});

I want to be able to create a div when I click on a suggestion, but I can't figure that out. How can I do this? I tried to append an onclick event but it isn't even called. Any help is highly appreciated :)

Answer 1

You can create an div element and inject it after the input using the following syntax:

$('input.typeahead').bind('typeahead:selected', function(obj, datum, name) {

    var $div = $('<div/>', {
        class: 'whatever'
    });

    $div.append('some text');

    //insert after input
    $(this).after($div);

    // or you can inject it into a specific element
    $('#elementId').append($div);
});