JQuery实现textarea@提及自动补全：点击结果替换内容问题求助

Hey Jean, let's tackle this frustrating issue where clicking your autocomplete results isn't replacing the partial @mention (like @Je) with the full username (like @Jean). Since your PHP backend is returning JSON correctly, the problem is definitely in the jQuery click handling or text replacement logic—let's break this down step by step.

First: Check Event Binding for Dynamic List Items #

If your autocomplete list is generated dynamically (which it almost certainly is, since it loads based on user input), using a standard .click() event won't work. The elements don't exist when the page loads, so the event never binds to them. Instead, use event delegation with $(document).on():

// Replace .autocomplete-item with your actual list item class
// Replace #your-textarea with your textarea's ID
$(document).on('click', '.autocomplete-item', function() {
  // Your replacement logic goes here
});

This ensures the click event is captured even for elements added after the page loads.

Second: Nail the Text Replacement Logic #

The core issue is probably how you're identifying the partial @mention and replacing it. Here's a reliable way to target exactly the right part of the textarea content:

$(document).on('click', '.autocomplete-item', function(e) {
  e.preventDefault();
  
  // Get the full username from the clicked list item (adjust selector if needed)
  const fullMention = $(this).text().trim();
  const textarea = $('#your-textarea');
  const content = textarea.val();
  const caretPos = textarea[0].selectionStart; // Get current cursor position

  // Find the last @ symbol before the cursor (this is the start of our partial mention)
  const prevContent = content.slice(0, caretPos);
  const atSymbolIndex = prevContent.lastIndexOf('@');

  if (atSymbolIndex !== -1) {
    // Replace the partial mention (@Je) with the full one (@Jean)
    const updatedContent = 
      prevContent.slice(0, atSymbolIndex) + // Everything before the @
      fullMention + // The full username we're inserting
      content.slice(caretPos); // Everything after the cursor

    // Update the textarea value
    textarea.val(updatedContent);

    // Move the cursor to the end of the inserted mention (nice UX touch)
    textarea[0].selectionStart = textarea[0].selectionEnd = atSymbolIndex + fullMention.length;
  }

  // Hide the autocomplete list after selection
  $('.autocomplete-list').hide();
});

Common Pitfalls to Double-Check #

• Extra whitespace: Make sure fullMention doesn't have leading/trailing spaces—using .trim() fixes this.
• Incorrect cursor position: If you don't update the cursor after replacement, users might think the text didn't change (even if it did).
• Event bubbling: If your list is inside a container with other click handlers, add e.stopPropagation() if needed (but only if it doesn't break other functionality).
• Mention detection edge cases: What if the user types multiple @mentions? The code above targets the most recent one, which is what you want.

Test It Out! #

Try replacing your current click handler with this code, adjusting the selectors to match your HTML. If it still doesn't work, add console.log() statements to debug:

• Log fullMention to confirm you're getting the right username.
• Log atSymbolIndex to make sure it's finding the @ correctly.
• Log updatedContent to verify the replacement is happening before setting the textarea value.

This should resolve the replacement issue—let me know if you hit any snags!

内容的提问来源于stack exchange，提问作者Jean