jQuery delicious alike tags input

I am trying to build a tags input which act like delicious tags , i managed to send the value of a text to the text input field , but can't append more than one tags . How i can make it submit more than one tag with separator " , " ..

        <label for="tags">Tags</label>
    <input type="text" name="tags" id="tags"  />


    <p>
        <a class="but">tag 1</a>
        <a class="but">tag 2</a>
        <a class="but">tag 3</a>
        <a class="but">tag 4</a>
        <a class="but">tag 5</a>
       开发者_JAVA百科 <a class="but">tag 6</a>
        <a class="but">tag 7</a>
        <a class="but">tag 8</a>
    </p>
   <script>
    $(".but").click(function () {
      var text = $(this).text();
      $("#tags").val(text);
    });
   </script>

Here's how I did it using jQueryUI

function split(val) {
    return val.split(/,\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

    $("input[name='categoriesAsText']").autocomplete({
        source: function(request, response) {
            $.getJSON(URLS.search_admin_categories, {
                term: extractLast(request.term)

            }, response);
        },
        select: function(event, ui) {
            var terms = split(this.value);
            terms.pop();
            terms.push(ui.item.value);
            terms.push("");
            this.value = terms.join(", ");
            return false;
        },
        focus: function() {
            return false;
        },
        search: function() {
            var term = extractLast(this.value);
            if (term.length < 2) {
                return false;
            }
        }
    });

Here is the server side code for doing the search. It's in Grails, but you should be able to craft it to your server side language of choice:

def search = {
    withFormat {
      json {
        def categories = Category.createCriteria().list() {
          ilike('name', "${params.term}%")
        }

        categories = categories.collect {
          [id: it.id, label: it.name, value: it.name]
        }

        render categories as JSON
      }
    }
  }

This will keep the current value of the #tags input (if there is one) and append the new tag separating each tag with ,

$(".but").click(function () {
    var text = $(this).text();
    var input = $("#tags");
    var curtext = input.val();
    input.val( (curtext ? curtext + ", " : "") + text);
    $(this).hide(); // Hide the tag link
});

Example: http://jsfiddle.net/petersendidit/ZFYC5/