<form id="tagForm">
    <label for="tagInput">Enter tags (comma-separated):</label><br>
    <input type="text" id="tagInput"><br><br>
    <button type="button" id="copyButton">Copy Tags</button>
  </form>
  <textarea id="tagTextarea" rows="4" cols="50"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script>
    $(document).ready(function() {
      $('#generateButton').click(function() {
        // Get input value and split into array of tags
        const tags = $('#tagInput').val().split(',');

        // Trim spaces from each tag and remove empty tags
        const cleanedTags = tags.map(tag => '#' + tag.trim()).filter(tag => tag !== '');

        // Populate textarea with tags
        $('#tagTextarea').val(cleanedTags.join(', '));

        // Clear input field
        $('#tagInput').val('');
      });

      $('#copyButton').click(function() {
        // Select the textarea
        const textarea = document.getElementById('tagTextarea');
        textarea.select();
        textarea.setSelectionRange(0, 99999); // For mobile devices

        // Copy the selected text
        document.execCommand('copy');
      });

      // Google Suggest Queries API
      $('#tagInput').on('input', function() {
        const query = $(this).val();
        if (query.trim() !== '') {
          $.ajax({
            url: 'https://suggestqueries.google.com/complete/search',
            method: 'GET',
            dataType: 'jsonp',
            data: {
              q: query,
              client: 'firefox'
            },
            success: function(response) {
              const suggestions = response[1].map(tag => '#' + tag.trim());
              $('#tagTextarea').val(suggestions.join(', '));
            },
            error: function(xhr, status, error) {
              console.error('Error fetching suggestions:', error);
            }
          });
        } else {
          $('#tagTextarea').val('');
        }
      });
    });
  </script>

× How can I help you?