STYLE CSS

<style>
.tag-container {

      display: flex;
      flex-wrap: wrap;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #fff;
      position: relative;
    }

    .tag {
      background-color: #e8e8e8;
      color: #333;
      padding: 5px 10px;
      margin: 3px;
      border-radius: 20px;
      display: flex;
      align-items: center;
    }

    .tag .remove-tag {
      margin-left: 8px;
      cursor: pointer;
      font-weight: bold;
    }

.tag-input {
      border: none;
      outline: none;
      flex: 1;
      min-width: 100px;
      padding: 5px;
}

.suggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #ccc;
      z-index: 10;
      max-height: 150px;
      overflow-y: auto;
}

.suggestion-item {
      padding: 5px 10px;
      cursor: pointer;
    }

    .suggestion-item:hover {
      background-color: #f0f0f0;
 }
</style>

HTML 구조

<div class="write_div">
    <div class="tag-container" id="tagContainer">
        <input type="text" id="tagInput" class="tag-input" value="<?php echo $write['wr_1'] ?>" placeholder="#해시태그 입력">
    </div>
    <input type="hidden" name="wr_1" id="wr_1" value="<?php echo $write['wr_1'] ?>">
</div>

반드시 HTML구조를 숙지한후 적용바랍니다.

tagContainer와 taginput이 있어야합니다.

스페이스나 ENTER키를 넣으면 자동으로 입력되는 구조입니다.

스크립트

<script>
  const tagInput = document.getElementById('tagInput');
  const tagContainer = document.getElementById('tagContainer');
  const hiddenInput = document.getElementById('wr_1'); // hiddenTag는 입력후 텍스트에 input이 남는것을 방지해줍니다. 
  const suggestionsBox = document.getElementById('suggestions');

  let tags = [];

  window.addEventListener('DOMContentLoaded', () => {
    const existing = hiddenInput.value;
    if (existing) {
      tags = existing.split(',').map(t => t.trim()).filter(t => t);
      tags.forEach(addTag);
    }
  });

  tagInput.addEventListener('input', () => {
    const input = tagInput.value.toLowerCase().trim();
    suggestionsBox.innerHTML = '';
    if (input) {
      const filtered = defaultSuggestions.filter(tag => tag.startsWith(input) && !tags.includes(tag));
      filtered.forEach(tag => {
        const item = document.createElement('div');
        item.className = 'suggestion-item';
        item.textContent = tag;
        item.onclick = () => {
          addTag(tag);
          tagInput.value = '';
          suggestionsBox.innerHTML = '';
        };
        suggestionsBox.appendChild(item);
      });
    }
  });

  tagInput.addEventListener('keydown', (e) => {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault();
      const tagText = tagInput.value.trim();
      if (tagText && !tags.includes(tagText)) {
        addTag(tagText);
      }
      tagInput.value = '';
      suggestionsBox.innerHTML = '';
    }
  });

  function addTag(text) {
    tags.push(text);
    const tag = document.createElement('span');
    tag.className = 'tag';
    tag.innerText = `#${text}`;

    const removeBtn = document.createElement('span');
    removeBtn.className = 'remove-tag';
    removeBtn.innerText = '×';
    removeBtn.onclick = () => {
      tagContainer.removeChild(tag);
      tags = tags.filter(t => t !== text);
      updateHiddenInput();
    };

    tag.appendChild(removeBtn);
    tagContainer.insertBefore(tag, tagInput);
    updateHiddenInput();
  }

  function updateHiddenInput() {
    hiddenInput.value = tags.join(',');
  }
</script>