如何实现用户名输入框实时展示3-4个推荐用户名胶囊（UI片段）

以下是纯前端UI实现代码片段，你可以直接结合已有的WebSocket连接逻辑使用：

HTML 结构 #

<div class="username-input-container">
  <input type="text" id="usernameInput" placeholder="输入用户名" />
  <!-- 推荐列表容器 -->
  <div id="usernameSuggestions" class="suggestions-container"></div>
</div>

CSS 样式 #

.username-input-container {
  position: relative;
  width: 300px;
}

#usernameInput {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.suggestions-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
}

.suggestion-tag {
  display: inline-block;
  padding: 4px 8px;
  margin: 4px;
  background: #f0f4ff;
  color: #3366cc;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.suggestion-tag:hover {
  background: #e0e8ff;
}

JavaScript 逻辑 #

const usernameInput = document.getElementById('usernameInput');
const suggestionsContainer = document.getElementById('usernameSuggestions');

// 监听输入事件（替换为你的WebSocket消息交互逻辑）
usernameInput.addEventListener('input', () => {
  const inputValue = usernameInput.value.trim();
  if (!inputValue) {
    suggestionsContainer.style.display = 'none';
    return;
  }

  // 实际场景中：通过WebSocket发送关键词请求
  // yourWebSocket.send(JSON.stringify({ type: 'getUsernameSuggestions', keyword: inputValue }));
  // 然后在WebSocket的onmessage回调中拿到推荐列表，调用renderSuggestions渲染

  // 以下为模拟推荐数据，实际替换为后端返回结果
  const mockSuggestions = [
    `${inputValue}_user`,
    `user_${inputValue}`,
    `${inputValue}01`,
    `${inputValue}_2024`
  ];

  renderSuggestions(mockSuggestions);
});

// 渲染推荐胶囊
function renderSuggestions(suggestions) {
  if (suggestions.length === 0) {
    suggestionsContainer.style.display = 'none';
    return;
  }

  suggestionsContainer.innerHTML = '';
  suggestions.forEach(suggestion => {
    const tag = document.createElement('div');
    tag.className = 'suggestion-tag';
    tag.textContent = suggestion;
    // 点击推荐项填充到输入框
    tag.addEventListener('click', () => {
      usernameInput.value = suggestion;
      suggestionsContainer.style.display = 'none';
    });
    suggestionsContainer.appendChild(tag);
  });
  suggestionsContainer.style.display = 'block';
}

// 点击页面其他区域隐藏推荐列表
document.addEventListener('click', (e) => {
  if (!e.target.closest('.username-input-container')) {
    suggestionsContainer.style.display = 'none';
  }
});

使用说明 #

1. 调整CSS中的容器宽度、颜色等样式，匹配你的项目UI规范。
2. 替换JavaScript中的模拟推荐逻辑：在输入事件触发时，通过已建立的WebSocket发送关键词请求，后端返回推荐列表后调用renderSuggestions方法即可完成渲染。
3. 推荐项的点击交互已内置填充输入框和隐藏列表的逻辑，无需额外修改。

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