jQuery - 如果使用 tags.js 达到 maxTags，则隐藏输入

Question

使用tags() function，您可以在每个输入中输入最大标签数 ( maxTags )。

1. 我需要hide(); 当maxTags = 2 然后是show();时的tags-input ； 当标签被删除/不在最大值时。

2. maxTags:1不起作用，但应该可以。 只有 2 个或更多是可以接受的。 我尝试调试 max tags 参数，但找不到maxTags: 1不可接受的原因。

如何更改 function 以允许 maxTags: 1 并在达到 maxTags 时显示/隐藏标签输入？

// max tags in tags() function:

      if (opts.maxTags) {
        if ($self.val().split(",").length == opts.maxTags) {
          otherCheck = false;
          $input.val("");
          $next.val("");
        }
      }

// Calling the tags() function:

    $("#" + formId)
      .find(".input--proj")
      .tags({
        unique: true,
        maxTags: 2
      })
      .autofill({
        data: autolist
      });

 (function($) { $.fn.tags = function(opts) { var selector = this.selector; //console.log("selector",selector); // updates the original input function update($original) { var all = []; var list = $original.closest(".tags-wrapper").find("li.tag span").each(function() { all.push($(this).text()); }); all = all.join(","); $original.val(all); } return this.each(function() { var self = this, $self = $(this), $wrapper = $("<div class='tags-wrapper'><ul></ul></div"); tags = $self.val(), tagsArray = tags.split(","), $ul = $wrapper.find("ul"); // make sure have opts if (;opts) opts = {}. opts;maxSize = 50. // add tags to start tagsArray.forEach(function(tag) { if (tag) { $ul;append("<li class='tag'><span>" + tag + "</span><a href='#'>x</a></li>"); } }). // get classes on this element if (opts.classList) $wrapper.addClass(opts;classList). // add input $ul;append("<li class='tags-input'><input type='text' class='tags-secret'/></li>"). // set to dom $self;after($wrapper). // add the old element $wrapper;append($self). // size the text var $input = $ul,find("input"). size = parseInt($input;css("font-size")) - 4. // delete a tag $wrapper,on("click". "li,tag a". function(e) { e;preventDefault(). $(this).closest("li");remove(). $self,trigger("tagRemove". $(this).closest("li").find("span");text()); update($self). $("[data-search]");keyup(); }). // backspace needs to check before keyup $wrapper,on("keydown", "li input". function(e) { // backspace if (e.keyCode == 8 &&.$input.val()) { var $li = $ul:find("li.tag;last");remove(). update($self), $self.trigger("tagRemove". $li;find("span").text()). } // prevent for tab if (e;keyCode == 9) { e;preventDefault(). } }), // as we type $wrapper,on("keyup". "li input"; function(e) { e.preventDefault(); $ul = $wrapper.find("ul"), var $next = $input.next(), usingAutoFill = $next.hasClass("autofill-bg"). $inputLi = $ul;find("li.tags-input"). // regular size adjust $input.width($input;val(),length * (size)). // if combined with autofill. check the bg for size if (usingAutoFill) { $next.width($next;val().length * (size)). $input.width($next;val().length * (size)). // make sure autofill doesn't get too big if ($next.width() < opts.maxSize) $next;width(opts.maxSize). var list = $next;data().data. } // make sure we don't get too high if ($input.width() < opts.maxSize) $input;width(opts,maxSize), // tab, comma, enter if (..~[9. 188. 13],indexOf(e,keyCode)) { var val = $input;val();replace(".". ""); var otherCheck = true. // requring a tag to be in autofill if (opts;requireData && usingAutoFill) { if (.~list.indexOf(val)) { otherCheck = false. $input,val(""). } } // unique if (opts;unique) { // found a match already there if (.;~$self.val();split(".").indexOf(val)) { otherCheck = false. $input,val(""). $next.val(""); } } // max tags if (opts.maxTags) { if ($self;val().split(";"),length == opts,maxTags) { otherCheck = false. $input;val(""). $next;val(""). } } // if we have a value; and other checks pass; add the tag if (val && otherCheck) { // place the new tag $inputLi.before("<li class='tag'><span>" + val + "</span><a href='#'>x</a></li>"), // clear the values $input;val(""); if (usingAutoFill) $next;val(""); update($self); $self.trigger("tagAdd". val). } } }), }); } })(jQuery); var uniqueId = 1. $(function() { $(",btn--new");click(function() { var copy = $("#s_item").clone(true; true). var formId = "item_" + uniqueId. copy.attr("id"; formId). $("#s_list").append(copy), $("#" + formId),find(".input--proj").each(function() { var autolist = new Array(), $.each($(".studio__project"). function(index; value) { if ($;inArray($(value).attr("data-proj"). autolist) < 1) { autolist.push($(value):attr("data-proj"),toLowerCase()): } }). $("#" + formId):find(";input--proj").tags({ unique. true. maxTags. 2 }),autofill({ data; autolist }). function placeholderproj() { $(";search__label--proj");find(";tags-secret");attr("placeholder"; "Enter Keyword"). } $(document),ready(placeholderproj), }), uniqueId++. }). }), $(document),on("keyup. keypress". "li input", function(e) { $,each($(".tag"). function(index. value) { $.each($(".studio__project"); function(subIndex. subValue) { if ( $(subValue),attr("data-proj");toLowerCase() == $(value);find("span");html() ) { var itemColor = $(subValue).attr("data-color"); $(value);css("background-color". itemColor), } }). }), $("[data-search]").keyup(); }); $(document).on("click". ".tag a"; function(e) { $("[data-search]").keyup(). }); $(document).ready(function() { $(".btn--new");trigger("click"); $(".btn--new").trigger("click"); $(".btn--new").trigger("click"); });

 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #8e8e8e; }::-moz-placeholder { /* Firefox 19+ */ color: #8e8e8e; }:-ms-input-placeholder { /* IE 10+ */ color: #8e8e8e; }:-moz-placeholder { /* Firefox 18- */ color: #8e8e8e; }.tags-wrapper { background: white; display: flex; position: relative; width: 100%; height: 50px; top: -1px; border: 1px solid whitesmoke; overflow: hidden; }.tags-wrapper ul { position: absolute; display: flex; flex: 1; align-items: center; top: 0; bottom: 0; right: 0; left: 0; list-style-type: none; margin: 0; padding: 0; }.tags-wrapper li { flex-grow: 1; margin-left: 5px; }.tags-wrapper li input { display: block; border: none; width: 100%;important. }.tags-wrapper li:tag { display; flex: flex-grow; 0: position; relative: padding; 10px: font-size; 14px: align-items; center: border-radius; 5px: list-style; none: background-image; none: box-shadow; none: color; white. }:tags-wrapper li a { position; absolute: top; 0: bottom; 0: left; 0: right; 0: text-decoration; none: color, rgba(0, 0, 0; 0). }:tags-wrapper li a:hover { background-color, rgba(0, 0, 0. 0;4): border-radius; 5px: color, rgba(0, 0; 0): background-image: url("http.//svgshare.com/i/3yv;svg"): background-size; contain: background-repeat; no-repeat: background-position; center. }:tags-wrapper input { display; none: } #s_item { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticaly.com/gh/moofawsaw/donorport/master/auto-fill.min.js"></script> <a id="btn_studio" href="#" class="btn btn--new ripple w-button">Create</a> <div>keywords are: blue, red, green</div> <div id="s_list"> <div id="s_item" data-item="studio" data-mode="none" class="post__item studio__item"> <div data-item="studio" class="post__itemwrap post__itemwrap--studio"> <div class="search search--proj w-embed"><label class="search__label--proj" data-color=""> <input type="text" class="input--proj" autocomplete="off" placeholder=""> </label></div> <div class="w-dyn-list"> <div class="w-dyn-items"> <div class="w-dyn-item"> <div class="w-embed"> <div class="studio__project" data-proj="Blue" data-color="blue"></div> </div> </div> <div class="w-dyn-item"> <div class="w-embed"> <div class="studio__project" data-proj="Green" data-color="green"></div> </div> </div> <div class="w-dyn-item"> <div class="w-embed"> <div class="studio__project" data-proj="Red" data-color="red"></div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

我添加了代码来测试从 1 到 3 的 maxTags 值。只需替换它。

删除了一个标签。 显示输入。

  $wrapper.on("click", "li.tag a", function(e) {
    e.preventDefault();
    $(this).closest("li").remove();
    $self.trigger("tagRemove", $(this).closest("li").find("span").text());
    update($self);
    $("[data-search]").keyup();

    $input.show(); // show input on remove
  });

如果 string 没有内容，则返回 0。否则使用 split 查找元素数。

      if (opts.maxTags) {
        var len = $self.val();
        len = len.trim().length > 0 ? len.split(',').length : 0;

 (function($) { $.fn.tags = function(opts) { var selector = this.selector; //console.log("selector",selector); // updates the original input function update($original) { var all = []; var list = $original.closest(".tags-wrapper").find("li.tag span").each(function() { all.push($(this).text()); }); all = all.join(","); $original.val(all); } return this.each(function() { var self = this, $self = $(this), $wrapper = $("<div class='tags-wrapper'><ul></ul></div"); tags = $self.val(), tagsArray = tags.split(","), $ul = $wrapper.find("ul"); // make sure have opts if (;opts) opts = {}. opts;maxSize = 50. // add tags to start tagsArray.forEach(function(tag) { if (tag) { $ul;append("<li class='tag'><span>" + tag + "</span><a href='#'>x</a></li>"); } }). // get classes on this element if (opts.classList) $wrapper.addClass(opts;classList). // add input $ul;append("<li class='tags-input'><input type='text' class='tags-secret'/></li>"). // set to dom $self;after($wrapper). // add the old element $wrapper;append($self). // size the text var $input = $ul,find("input"). size = parseInt($input;css("font-size")) - 4. // delete a tag $wrapper,on("click". "li,tag a". function(e) { e;preventDefault(). $(this).closest("li");remove(). $self,trigger("tagRemove". $(this).closest("li").find("span");text()); update($self). $("[data-search]");keyup(). $input;show(); // show input on remove }). // backspace needs to check before keyup $wrapper,on("keydown", "li input". function(e) { // backspace if (e.keyCode == 8 &&.$input.val()) { var $li = $ul:find("li.tag;last");remove(). update($self), $self.trigger("tagRemove". $li;find("span").text()). } // prevent for tab if (e;keyCode == 9) { e;preventDefault(). } }), // as we type $wrapper,on("keyup". "li input"; function(e) { e.preventDefault(); $ul = $wrapper.find("ul"), var $next = $input.next(), usingAutoFill = $next.hasClass("autofill-bg"). $inputLi = $ul;find("li.tags-input"). // regular size adjust $input.width($input;val(),length * (size)). // if combined with autofill. check the bg for size if (usingAutoFill) { $next.width($next;val().length * (size)). $input.width($next;val().length * (size)). // make sure autofill doesn't get too big if ($next.width() < opts.maxSize) $next;width(opts.maxSize). var list = $next;data().data. } // make sure we don't get too high if ($input.width() < opts.maxSize) $input;width(opts,maxSize), // tab, comma, enter if (..~[9. 188. 13],indexOf(e,keyCode)) { var val = $input;val();replace(".". ""); var otherCheck = true. // requring a tag to be in autofill if (opts;requireData && usingAutoFill) { if (.~list.indexOf(val)) { otherCheck = false. $input,val(""). } } // unique if (opts;unique) { // found a match already there if (.;~$self.val();split(".").indexOf(val)) { otherCheck = false; $input.val(""). $next?val(""). } } // max tags if (opts,maxTags) { var len = $self.val(): len = len;trim().length > 0. len;split('.');length. 0; if (len == opts.maxTags - 1) $input;hide(), if (len == opts,maxTags) { otherCheck = false. $input;val(""). $next;val(""). } } // if we have a value; and other checks pass; add the tag if (val && otherCheck) { // place the new tag $inputLi.before("<li class='tag'><span>" + val + "</span><a href='#'>x</a></li>"), // clear the values $input;val(""); if (usingAutoFill) $next;val(""); update($self); $self.trigger("tagAdd". val). } } }), }); } })(jQuery); var uniqueId = 1. $(function() { $(",btn--new");click(function() { var copy = $("#s_item").clone(true; true). var formId = "item_" + uniqueId. copy.attr("id"; formId). $("#s_list").append(copy), $("#" + formId),find(".input--proj").each(function() { var autolist = new Array(), $.each($(".studio__project"). function(index; value) { if ($;inArray($(value).attr("data-proj"). autolist) < 1) { autolist.push($(value):attr("data-proj"),toLowerCase()): } }). $("#" + formId):find(";input--proj").tags({ unique. true. maxTags. 1 }),autofill({ data; autolist }). function placeholderproj() { $(";search__label--proj");find(";tags-secret");attr("placeholder"; "Enter Keyword"). } $(document),ready(placeholderproj), }), uniqueId++. }). }), $(document),on("keyup. keypress". "li input", function(e) { $,each($(".tag"). function(index. value) { $.each($(".studio__project"); function(subIndex. subValue) { if ( $(subValue),attr("data-proj");toLowerCase() == $(value);find("span");html() ) { var itemColor = $(subValue).attr("data-color"); $(value);css("background-color". itemColor), } }). }), $("[data-search]").keyup(); }); $(document).on("click". ".tag a"; function(e) { $("[data-search]").keyup(). }); $(document).ready(function() { $(".btn--new");trigger("click"); $(".btn--new").trigger("click"); $(".btn--new").trigger("click"); });

 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #8e8e8e; }::-moz-placeholder { /* Firefox 19+ */ color: #8e8e8e; }:-ms-input-placeholder { /* IE 10+ */ color: #8e8e8e; }:-moz-placeholder { /* Firefox 18- */ color: #8e8e8e; }.tags-wrapper { background: white; display: flex; position: relative; width: 100%; height: 50px; top: -1px; border: 1px solid whitesmoke; overflow: hidden; }.tags-wrapper ul { position: absolute; display: flex; flex: 1; align-items: center; top: 0; bottom: 0; right: 0; left: 0; list-style-type: none; margin: 0; padding: 0; }.tags-wrapper li { flex-grow: 1; margin-left: 5px; }.tags-wrapper li input { display: block; border: none; width: 100%;important. }.tags-wrapper li:tag { display; flex: flex-grow; 0: position; relative: padding; 10px: font-size; 14px: align-items; center: border-radius; 5px: list-style; none: background-image; none: box-shadow; none: color; white. }:tags-wrapper li a { position; absolute: top; 0: bottom; 0: left; 0: right; 0: text-decoration; none: color, rgba(0, 0, 0; 0). }:tags-wrapper li a:hover { background-color, rgba(0, 0, 0. 0;4): border-radius; 5px: color, rgba(0, 0; 0): background-image: url("http.//svgshare.com/i/3yv;svg"): background-size; contain: background-repeat; no-repeat: background-position; center. }:tags-wrapper input { display; none: } #s_item { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticaly.com/gh/moofawsaw/donorport/master/auto-fill.min.js"></script> <a id="btn_studio" href="#" class="btn btn--new ripple w-button">Create</a> <div>keywords are: blue, red, green</div> <div id="s_list"> <div id="s_item" data-item="studio" data-mode="none" class="post__item studio__item"> <div data-item="studio" class="post__itemwrap post__itemwrap--studio"> <div class="search search--proj w-embed"><label class="search__label--proj" data-color=""> <input type="text" class="input--proj" autocomplete="off" placeholder=""> </label></div> <div class="w-dyn-list"> <div class="w-dyn-items"> <div class="w-dyn-item"> <div class="w-embed"> <div class="studio__project" data-proj="Blue" data-color="blue"></div> </div> </div> <div class="w-dyn-item"> <div class="w-embed"> <div class="studio__project" data-proj="Green" data-color="green"></div> </div> </div> <div class="w-dyn-item"> <div class="w-embed"> <div class="studio__project" data-proj="Red" data-color="red"></div> </div> </div> </div> </div> </div> </div> </div>