Reputation: 188
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);
});
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
Reputation: 728
Add it before the button:
$('#submit').before('<input type="text" value="test" />');
Upvotes: 3