jQuery delicious相似标签输入

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

这将保留#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/

Answer 2

下面是我如何使用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
      }
    }
  }