vashzero
vashzero

Reputation: 188

How to append jquery ui autocomplete element?

I would like to know how to append jquery ui autocomplete elements once the page is active.

The idea is that there are two elements and I would like to add the third element once a submit button is pressed.

Here is my code:

$(function() {
    var projects = [{
            value: '123',
            label: 'Element 1',
            desc: 'Element 1 Description',
            icon: 'element1icon.png'
        },{
            value: '456',
            label: 'Element 2',
            desc: 'Element 2 Description',
            icon: 'element2icon.png'
        }
    ,];

    $("#desc1").autocomplete({
        minLength: 0,
        source: projects,
        focus: function(event, ui) {
            $("#desc1").val(ui.item.label);
            return false;
        },
        select: function(event, ui) {
            $("#desc1").val(ui.item.label);
            $("#desc-id1").val(ui.item.value);

            return false;
        }
    })
    .data('ui-autocomplete')._renderItem = function(ul, item) {
        return $('<li>')
        .append('<a>' + item.label + '<br>' + item.desc + '</a>')
        .appendTo(ul);
    };
});

$( "#submit" ).click(function() {
    var itemtoadd = $("#addelementtext").val();
    alert("This action should insert the element " + itemtoadd);
});

HERE IS THE FIDDLE

EDIT:

The idea is that the old textbox appears with the new element ELEMENT 3 as if it was declared like this:

var projects = [{
            value: '123',
            label: 'Element 1',
            desc: 'Element 1 Description',
            icon: 'element1icon.png'
        },{
            value: '456',
            label: 'Element 2',
            desc: 'Element 2 Description',
            icon: 'element2icon.png'
        },{
            value: '789',
            label: 'Element 3',
            desc: 'Elemen 3 Description',
            icon: 'element3icon.png'
        },

    ,]; 

Upvotes: 1

Views: 4125

Answers (1)

Matthew Rhoden
Matthew Rhoden

Reputation: 728

Add it before the button:

$('#submit').before('<input type="text" value="test" />');

http://jsfiddle.net/2GvuB/1/

Upvotes: 3

Related Questions