jQuery-UI selectable into input

Question

please follow this link: FIDDLE

I'm building this input (that is a search tool) and I'm putting some "tips" to select.

I use an hidden paragraph to store it better.

I have 2 problems:

1. if you try to select 3 tips and that to deselect all you can see that the hidden text is empty but the input have the last tips selected.
2. I would like that if I manually type "Hello world" and than I use tips, Hello world stay there always, also if I remove all the tips than.

Thank you in advance for your help.

Answer 1

for your first question, try this code

$(document).ready(function() {
    var lista = $('ul#common-list');
    lista.bind("mousedown", function (e) {
        e.metaKey = true;
    }).selectable({
        stop: function () {
            var result = $("input#search");
            var fakeText = $('p.hidden-tips-text').empty();
            $(".ui-selected", this).each(function () {
                var index = $(this).text();
                fakeText.append((index) + " ");
            });
           result.val(fakeText.text());
        }
    });
});