jQuery вкусные теги ввода

Question

Я пытаюсь создать ввод тегов, который действует как вкусные теги, мне удалось отправить значение текста в поле ввода текста, но я не могу добавить более одного тега.Как я могу сделать это представить более одного тега с разделителем "," ..

        <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>
        <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>

Answer 1

Вот как я это сделал, используя 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;
            }
        }
    });

Вот код на стороне сервера для выполнения поиска.Это в Grails, но вы должны быть в состоянии создать его на выбранном вами серверном языке:

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

Answer 2

Это сохранит текущее значение ввода #tags (если оно есть) и добавит новый тег, разделяющий каждый тег, с помощью ,

$(".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
});

Пример: http://jsfiddle.net/petersendidit/ZFYC5/