Reaksi: Pop timbul cadangan carian kekal terbuka

Question

Saya cuba membina kotak input di mana pengguna akan menaip sesuatu dan berdasarkan input pop timbul cadangan akan muncul di bawah kotak input yang menunjukkan kandungan yang dicadangkan. Dalam kod saya, cadangan dipaparkan dengan baik, tetapi apabila saya menaip lebih banyak, pop timbul sebelumnya tidak ditutup.

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>

Di sinilah saya menunjukkan rendering saya. Fungsi getSuggestions adalah seperti berikut:

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>
        )}
      </>
    );
  };

Dalam fungsi ini saya menunjukkan pop timbul dengan cadangan carian. Saya tahu mengapa pop timbul tidak akan ditutup kerana apabila saya memasukkan sesuatu yang sepadan dengan data cadangan, pembolehubah fungsi getSuggestions mendapat nilai yang ditapis. Itulah sebabnya pop timbul tidak akan ditutup. Tetapi saya hanya mahu cadangan carian ditunjukkan apabila nilai input sepadan dengan data cadangan carian, jika tidak, pop timbul akan sentiasa disembunyikan.

Answer 1

Masalah yang anda hadapi ialah apabila anda meneruskan menaip, cadangan pop timbul sebelumnya tidak dikosongkan.

Untuk menyelesaikan isu ini, anda perlu mengurus keterlihatan pop timbul cadangan dan mengawal paparannya. Berikut ialah versi kod anda yang dikemas kini yang sepatutnya mengendalikan perkara ini:

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>
);