基于Vue實現(xiàn)一個textarea幽靈建議功能

更新時間：2023年09月02日 14:33:30 作者：60歲咯

不知道你有沒有發(fā)現(xiàn)Bing AI聊天有個輸入提示功能,在用戶輸入部分內(nèi)容時后面會給出灰色提示文案,用戶只要按下tab鍵就可以快速添加提示的后續(xù)內(nèi)容,我將這個功能稱為幽靈建議,接下來我將用Vue框架來實現(xiàn)這個功能,需要的朋友可以參考下

不知道你有沒有發(fā)現(xiàn)Bing AI聊天有個輸入提示功能，在用戶輸入部分內(nèi)容時后面會給出灰色提示文案。用戶只要按下tab鍵就可以快速添加提示的后續(xù)內(nèi)容。我將這個功能稱為幽靈建議。接下來我將用Vue框架來實現(xiàn)這個功能。

布局樣式

布局使用label標簽作為容器，這樣即使建議內(nèi)容在上層，也不會影響輸入框的輸入。

<label class="container">
  <textarea></textarea>
  <div class="ghost-content"></div>
</label>

樣式需要確保輸入框與建議內(nèi)容容器除了顏色外都要一致。建議內(nèi)容可以通過z-index: -1置于輸入框底部，但要注意輸入框必須是透明背景。

.container {
  position: relative;
  display: block;
  width: 300px;
  height: 200px;
  font-size: 14px;
  line-height: 21px;
}
.container textarea {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: #212121;
  background-color: #fff;
  outline: none;
}
.ghost-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #212121;
  opacity: 0.3;
}

顯示邏輯

顯示邏輯比較簡單，當輸入框中顯示輸入內(nèi)容時，找到匹配的內(nèi)容后將其顯示在建議容器中。以下是代碼示例：

import { ref } from 'vue'
const content = ref('') // 輸入框內(nèi)容
const ghostContent = ref('') // 建議內(nèi)容
const suggestions = ['你好啊', '怎么學編程'] // 建議列表
const handleInput = () => {
  ghostContent.value = '' // 內(nèi)容變化時，清空建議
  // 如果為空或者建議內(nèi)容改變，則不進行后續(xù)匹配
  if (content.value === '') {
    return
  }
  const suggestion = suggestions.find((item) => item.startsWith(content.value))
  if (suggestion) {
    ghostContent.value = suggestion
  }
}
const handleTabKeydown = () => {
  // 監(jiān)聽tab鍵按下，將輸入框內(nèi)容設置為建議內(nèi)容，同時清空建議內(nèi)容
  content.value = ghostContent.value
  ghostContent.value = ''
}

按照以上代碼的寫法，已經(jīng)可以實現(xiàn)幽靈建議的功能了。但還存在一個小問題，輸入框內(nèi)容和建議內(nèi)容的重疊部分會顯得比較粗。因此，最好將重疊部分的文字顏色設置為透明。我的解決方法是使用span標簽來包裹重疊部分的內(nèi)容，然后將span的文字樣式設置為透明。此外，為了表示可以使用tab鍵，我在末尾添加了→符號。改進后的代碼如下：

// 重復部分省略
// ...
const ghostHTML = ref('') // 建議內(nèi)容HTML
const handleInput = () => {
  ghostContent.value = ''
  ghostHTML.value = ''
  if (content.value === '' || fromSuggestion) {
    fromSuggestion && (fromSuggestion = false)
    return
  }
  const suggestion = suggestions.find((item) => item.startsWith(content.value))
  if (suggestion) {
    ghostContent.value = suggestion
    ghostHTML.value = suggestion.replace(content.value, `<span>${content.value}</span>`) + ' →' // 顯示內(nèi)容替換
  }
}
const handleTabKeydown = () => {
  content.value = ghostContent.value
  ghostContent.value = ''
  ghostHTML.value = ''
}

最后，補充一下HTML代碼。