JSFiddle - React, Tailwind, and code Playground

by Tan Kucukhas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text">


<ul class="list-group">

</ul>

JavaScript

var items = ["abc", "xyx", "klmop"];
var joinedItems = items.join(", ");
var charLimit = 10;



for (i = 0; i < items.length; i++) {
  $('ul').append("<li class='list-group-item active'>" + items[i] + "</li>");
}



$("li").click(function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
  } else {
    $(this).addClass("active")
  }
});

$('input').val($('input').val() + addEllipsis(joinedItems, charLimit));


function addEllipsis(str, limit) {
  if (str.split("").length > limit) {
    return str.slice(0, limit - 3) + "...";
  }
  return str;
}