jQuery - скрыть ввод, если maxTags достигнут с помощью тегов. js

Question

Используя функцию tags(), существует параметр для максимального количества тегов (maxTags), которые вы можете ввести в каждый ввод.

1. Мне нужно hide(); tags-input, когда maxTags = 2, а затем show();, когда тег удален / не на максимуме

2. maxTags :1 не работает, но должно быть. Допускается только 2 или более. Я пробовал отладить параметр maxTags, но не смог понять, почему maxTags: 1 неприемлемо.

Как я могу изменить функцию, чтобы разрешить 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

Я добавил код для проверки значения maxTags от 1 до 3. Просто замените его.

Тег удален. Показать ввод.

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

Если строка не имеет содержимого, вернуть 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>