How to append jquery ui autocomplete element?

Question

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'
        },

    ,];

Matthew Rhoden · Accepted Answer · 2013-12-13 20:55:38Z

3

Add it before the button:

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

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

answered Dec 13, 2013 at 20:55

Matthew Rhoden

7381 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vashzero Over a year ago

Hi thank you for your answer Matthew, however what I am looking for is that the element 3 is added (not a textbox but rather a new option in the autocomplete) (I edited the question for a better understanding) Regards!

Matthew Rhoden Over a year ago

In that case what you're wanting to do is attach the events to the new elements you're adding. You can do this without having to know the id's of them. See this updated fiddle: jsfiddle.net/2GvuB/4

vashzero Over a year ago

Thank you once again Matthew for your answer. I'm not sure how your code works, but the final result should be in the first textbox the new elment (So in total there should be 3 elements not two: Element 1, Element 2 and Element 3). I found on the web a similar solution but I cant quite adapt it to our fiddle. jsfiddle.net/3PZJz/1/light

Matthew Rhoden Over a year ago

Please post a link to the example you saw. I would like you to clarify one point for me. You just want to add entries to the availableTags collection, while still displaying auto complete? Also, if you bump up the jquery version you'll be able to fix the menu issue, otherwise you'll have to use css/jquery events to style the rendered ul menu. jsfiddle.net/3PZJz/10

vashzero Over a year ago

Yes that is exactly what I want, to add entries to the availableTags collection when I press the button in this example - JSFIDDLE. Thank you for your answer and sorry I wasnt able to answer before.

Collectives™ on Stack Overflow

How to append jquery ui autocomplete element?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related