How to Create a Tag List that Could Show up Inside Input After keyUp

Here's an example of how you can create a tag list that shows up inside an input field after keyUp event using JavaScript and HTML:

HTML:

<input type="text" id="input-field">
<div id="tag-list"></div>

JavaScript:

const inputField = document.getElementById("input-field");
const tagList = document.getElementById("tag-list");

inputField.addEventListener("keyup", function(event) {
  tagList.innerHTML = ""; // Clear previous tags
  const inputValue = event.target.value;
  if (!inputValue) return; // Don't show tag list if input is empty

  // Example list of tags to show
  const tags = ["apple", "banana", "cherry", "date", "elderberry"];

  // Filter tags based on input value
  const filteredTags = tags.filter(tag => tag.startsWith(inputValue));

  // Show filtered tags in tag list
  filteredTags.forEach(tag => {
    const tagElement = document.createElement("div");
    tagElement.innerHTML = tag;
    tagList.appendChild(tagElement);
  });
});

In this example, the keyUp event listener is added to the input field, and it updates the tag list div with filtered tags based on the input value.



Related Topics



Leave a reply



Submit