如何将搜索框内容提交后清空

将搜索框内容提交后清空通常是在网页或应用中处理用户交互的一种常见做法。在HTML中，你可以通过JavaScript来实现这个功能。这里是一个简单的例子：

<input type="text" id="searchBox" onsubmit="clearSearchInput();">

<script>
function clearSearchInput() {
  document.getElementById("searchBox").value = ""; // 清空输入框的内容
}
</script>

在这个例子中，当用户点击搜索按钮（默认的`onsubmit`事件），`clearSearchInput`函数会被调用，它会获取ID为`searchBox`的输入元素，并将其值设置为空字符串，从而实现了搜索框内容的清空。

如果你想在更复杂的场景下管理状态，比如使用React等前端框架，可以利用state来控制输入框的状态：

import React, { useState } from 'react';

function SearchBox() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    // 提交搜索请求...
    setInputValue('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="请输入搜索内容..."
      />
      <button type="submit">搜索</button>
    </form>
  );
}

export default SearchBox;

在这里，每当用户输入内容并提交，`setInputValue`会清除输入框内的内容。