我正在嘗試建立一個輸入框，用戶將在其中輸入內容，根據輸入內容，在輸入框下方會出現一個建議彈出窗口，顯示建議內容。在我的程式碼中，建議內容顯示得很好，但當我輸入更多內容時，先前的彈出視窗不會關閉。

return 
  setValue(e.target.value)} className="w-full border-none absolute inset-0 z-10 outline-none px-2 text-sm bg-transparent" style={{ WebkitTextFillColor: "transparent" }} maxLength={maxLength} /> 
 {value.split(" ").map((word, i) => { const isHighlighted = word.toLowerCase().includes(suggestions[0]); return ( 
 {isHighlighted ? ( <>{getHighlightedSyntex(word, i)} ) : ( getSyntex(word, i) )} {getSuggestions(word)} 
 ); })} 
 

這是我展示我的渲染的地方。 getSuggestions函數如下：

const getSuggestions = (word) => { const matchedPartialSuggestions = suggestions.filter( (item) => word !== "" && item.toLowerCase().startsWith(word.toLowerCase()) ); console.log('va', word, matchedPartialSuggestions) return ( <> {matchedPartialSuggestions.length > 0 && ( 
 {matchedPartialSuggestions?.map((item, i) => { return 
{highlightMatching(word, item)}
; })} 
 )}  ); };

在這些函數中，我展示了包含搜尋建議的彈出視窗。我知道為什麼彈出視窗不會關閉，因為當我輸入與建議資料相符的內容時，getSuggestions函數的變數得到了過濾後的值。這就是為什麼彈出視窗不會關閉。但是我只希望在輸入值與搜尋建議資料相符時顯示搜尋建議，否則彈出視窗將始終隱藏。