Tags selector in plain JavaScript, without using any plugin

Question

I have made a "tags selector" in plain JavaScript, without using any plugin.

const tagsList = document.querySelector(".tags-list")
const tagActions = document.getElementById("tagActions")
const tagSelector = document.getElementById("tags")
const tagToggler = document.getElementById("tagSelectorToggler")
var preSelectedTags = Array.from(tagSelector.options) 
    .filter(option => option.selected) 
    .map(option => option.text); 
var selectedTags = new Set()

function filterTags(event) {
  var query = event.target.value
  var availableTags = Array.from(tagSelector.options)

  availableTags.forEach(function (option) {
    if (!option.text.toLowerCase().includes(query.toLowerCase())) {
      option.classList.add("d-none")
    } else {
      option.classList.remove("d-none")
    }
  })
}

function toggleTagSelector(event) {
  if (event.target.tagName !== "BUTTON" && event.target.tagName !== "SPAN") {
    tagActions.classList.toggle("d-block")
    tagToggler.classList.toggle("active")
  }
}

function renderTags() {
  tagsList.innerHTML =
    [...selectedTags]
      .sort()
      .map(
        (tag) =>
          `<li class="tag"
            ><span class="value">${tag}</span>
            <button>&times;</button>
         </li>`,
      )
      .join("") ||
    `<li class="text-muted">Use [Ctrl] + [Click] to select one or more tags from the list</li>`
  for (const option of tagSelector.options) {
    option.selected = selectedTags.has(option.textContent)
  }
}

function addPreselectedTags(){
    preSelectedTags.forEach(function(tag){
        selectedTags.add(tag)
  });
    renderTags();
}

tagsList.addEventListener("click", function (event) {
  if (event.target.tagName !== "BUTTON") return
  const span = event.target.closest("LI").children[0]
  selectedTags.delete(span.textContent)
  renderTags()
})

tagSelector.addEventListener("change", function () {
  selectedTags = new Set(
    Array.from(tagSelector.options)
      .filter((option) => option.selected)
      .map((option) => option.textContent),
  )
  renderTags()
})

addPreselectedTags();

.form-control:focus, .form-select:focus {
  box-shadow: none;
}
/* Tags */
.tags-list {
  min-height: 40px;
  list-style-type: none;
}
.tags-list .tag {
  line-height: 1;
  white-space: nowrap;
  background: #f2f2f2;
  border: 1px solid #e6e3e3;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 13px;
  padding: 3px 8px;
  margin: 1px;
}
.tags-list .tag button {
  background: #ff9292;
  color: #720000;
  border: none;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  border-radius: 50%;
}
.tag-actions {
  display: none;
}
.toggler {
  position: absolute;
  right: 5px;
  margin-top: 8px;
  color: #777;
  cursor: pointer;
}
.toggler.active {
  transform: rotate(180deg);
}
.tag-select {
  height: 180px;
}
.tag-select option {
  padding: 3px 8px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container my-2">
  <form action="">
    <div class="form-group position-relative">
      <label for="tags" class="text-muted fw-bold pb-1">Tags</label>
      <div class="position-relative">
        <span
          id="tagSelectorToggler"
          class="toggler"
          onclick="toggleTagSelector(event)"
        >
          <i class="fas fa-chevron-up"></i>
        </span>
        <ul
          class="form-control tags-list mb-1 pe-4"
          onclick="toggleTagSelector(event)"
        >
          <li class="text-muted">
            Use [Ctrl] + [Click] to select one or more tags from the list
          </li>
        </ul>
      </div>

      <div id="tagActions" class="tag-actions d-block">
        <input
          oninput="filterTags(event)"
          type="search"
          class="form-control mb-1"
          placeholder="Filter available tags"
        />

        <select id="tags" name="tags" class="form-select tag-select" multiple>
          <option value="Apple" selected>Apple</option>
          <option value="Banana">Banana</option>
          <option value="Blackberry" selected>Blackberry</option>
          <option value="Blueberry">Blueberry</option>
          <option value="Cherry">Cherry</option>
          <option value="Cranberry">Cranberry</option>
          <option value="Grapes">Grapes</option>
          <option value="Kiwi">Kiwi</option>
          <option value="Mango">Mango</option>
          <option value="Orange">Orange</option>
          <option value="Peach">Peach</option>
          <option value="Pear">Pear</option>
          <option value="Pineapple">Pineapple</option>
          <option value="Raspberry">Raspberry</option>
          <option value="Strawberry">Strawberry</option>
          <option value="Watermelon">Watermelon</option>
        </select>
      </div>
    </div>
    <div class="form-group mt-3">
      <label for="body" class="text-muted fw-bold pb-1">Content</label>
      <textarea class="form-control" name="body" id="body" cols="30" rows="5"></textarea>
    </div>
   <div class="mt-2">
      <button class="btn btn-success btn-sm w-100">Send</button>
   </div>
  </form>
</div>

I am interested to know the following:

1. Is the tags selector interface intuitive and easy to use?
2. How can the app's usefulness or user-experience be improved?
3. Are there any suboptimal pieces of code that should be improved and if so, how?

Answer 1

Review

General Review

I like the styling - especially the colors, border radii, use of rotation, spacing etc. As far as I can tell the filtering works well.

Minor wording flaw

On some platforms CTRL is not the correct key to hold while selecting multiple options

Mouse users can hold the Ctrl, Command, or Shift keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them. ¹

Suggestions

• Array.from() could be replaced with spread syntax

• callback to forEach() method in filterTags() could utilize classList.toggle() instead of separate calls to add() and remove() when optional force parameter is used

• callback to forEach() method in addPreselectedTags() could be simplified using the Function .bind() method:

  preSelectedTags.forEach(selectedTags.add.bind(selectedTags));

• it may be wise to store the innerHTML of the default list item instead of storing the string literal in JavaScript function renderTags(). That way if the text needs to change it can be changed in just one place (i.e. the markup) instead of multiple.

Answer 2

1. Use const or let instead of var wherever possible (example, see filterTags() function).
2. Maintain consistency, either use semicolon to end the statement or don't (example, in addPreselectedTags() function, you have ended all statements with a semicolon, but not in other functions.)
3. Maybe reword "Filter available tags" to "Search available tags".
4. Create a function to construct a tag and/or other components that are created dynamically:

   function createTag(tag) {
       return `<li class="tag">
                 <span class="value">${tag}</span>
                 <button>&times;</button>
              </li>`;
   }