在输入中显示突出显示的文本-解网

问：

我正在尝试做如下的事情，即我有一个带有建议下拉列表的输入，这个 Male 和 Female 中只有 2 个值如果我键入 M，剩余的字母 ale 会在输入中突出显示，通过单击它或按 Tab 键，它会自动填充反之亦然，女性有没有图书馆？

我已经尝试了以下代码，但由于显而易见的原因，它没有显示任何突出显示的文本，并且在使用类型 M 或 F 时会自动填充，问题是由于以下情况，它不允许我擦除值

我正在附上一张图片供参考，这是gmail搜索中的一个功能 gmail搜索功能

if (name === 'patient_gender') {
        if (input.toLowerCase().startsWith('m')) {
            input = 'Male';
        } else if (input.toLowerCase().startsWith('f')) {
            input = 'Female';
        }
    }

ReactJS TypeScript 下拉列表突出显示搜索建议

import React from "react";
import "./styles.css";

export default function App() {
  const [userInput, setUserInput] = React.useState<string>("");
  const [autoInput, setAutoInput] = React.useState<string>("");
  const [userInputStyle, setUserInputStyle] = React.useState({ left: "0" });
  const [autoInputStyle, setAutoInputStyle] = React.useState();
  const MALE = "ale";
  const handleInputChange = (e) => {
    const str = e.target.value;
    if (str === "m") {
      // hardcoded width for demo, but useRef would  be better to get a more exact width
      const autoInputStyleChange = { right: 0, width: "458px" };
      const userInputStyleChange = { zIndex: "1" };
      setAutoInput(MALE);
      setUserInputStyle(userInputStyleChange);
      setAutoInputStyle(autoInputStyleChange);
    }
    setUserInput(str);
  };

  return (
    <div className="App">
      <h1>Test Input</h1>
      <form>
        <section className="input-wrapper">
          <input
            style={userInputStyle}
            className="user-input"
            type="text"
            value={userInput}
            onChange={handleInputChange}
          />
          <input
            style={autoInputStyle}
            className="auto-input"
            type="text"
            placeholder={autoInput}
          />
        </section>
      </form>
    </div>
  );
}

基本 CSS

.input-wrapper {
  position: relative;
  width: 100%;
}

.user-input,
.auto-input {
  position: absolute;
  top: 0;
  z-index: 5;
  border: 0;
  width: 100%;
}

.user-input {
  z-index: 6;
  left: 0;
  border: 1px solid blue;
  color: blue;
}

.auto-input {
  top: 1px;
  border: 0;
  outline: none;
  padding: 1px 0;
}

上一个：如何阻止 Visual Studio 仅突出显示当前代码块并淡出上方和下方的函数？

下一个：Safari 搜索栏以红色突出显示文本

在输入中显示突出显示的文本

Show highlighted text in input

评论