React：搜尋建議彈出視窗保持開啟狀態

Question

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

return <div className="border border-gray-400 rounded-md mx-10 my-10 h-10 relative">
      <input
        value={value}
        onChange={(e) => 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}
      />
      <div className="text-sm absolute inset-0 flex items-center px-2 whitespace-pre">
        {value.split(" ").map((word, i) => {
          const isHighlighted = word.toLowerCase().includes(suggestions[0]);
          return (
            <div className="relative" key={i}>
              {isHighlighted ? (
                <>{getHighlightedSyntex(word, i)}</>
              ) : (
                getSyntex(word, i)
              )}
              {getSuggestions(word)}
            </div>
          );
        })}
      </div>
    </div>

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

const getSuggestions = (word) => {
    const matchedPartialSuggestions = suggestions.filter(
      (item) => word !== "" && item.toLowerCase().startsWith(word.toLowerCase())
    );
    console.log('va', word, matchedPartialSuggestions)
    return (
      <>
        {matchedPartialSuggestions.length > 0 && (
          <div className="absolute z-10 p-2 bg-white border rounded shadow-lg">
            {matchedPartialSuggestions?.map((item, i) => {
            return <p key={i}>{highlightMatching(word, item)}</p>;
            })}
          </div>
        )}
      </>
    );
  };

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

Answer 1

您面臨的問題是，當您繼續輸入時，先前的彈出建議沒有被清除。

要解決這個問題，您需要管理建議彈出框的可見性並控制其顯示。以下是您的程式碼的更新版本，應該能夠處理這個問題：

return (
  <div className="border border-gray-400 rounded-md mx-10 my-10 relative">
    <input
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
        setShowSuggestions(true); // 当输入发生变化时显示建议
      }}
      onBlur={() => {
        setTimeout(() => setShowSuggestions(false), 200); // 当输入失去焦点时隐藏建议
      }}
      onFocus={() => setShowSuggestions(true)} // 当输入获得焦点时显示建议
      className="w-full border-none absolute inset-0 z-10 outline-none px-2 text-sm bg-transparent"
      style={{ WebkitTextFillColor: "transparent" }}
      maxLength={maxLength}
    />
    <div className="text-sm absolute inset-0 flex items-center px-2 whitespace-pre">
      {value.split(" ").map((word, i) => {
        const isHighlighted = word.toLowerCase().includes(suggestions[0]);
        return (
          <div className="relative" key={i}>
            {isHighlighted ? (
              <>{getHighlightedSyntex(word, i)}</>
            ) : (
              getSyntex(word, i)
            )}
            {showSuggestions && getSuggestions(word)} {/* 当showSuggestions为true时显示建议 */}
          </div>
        );
      })}
    </div>
  </div>
);