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/

jQuery美味的相似标签输入

2 个答案: