bootstrap4模仿写一个百度搜索框,增加防抖,输入框增加清除功能,点击搜索必须要等待请求结果返回后才能继续点击

好的，我可以为您提供一个简单的实现示例，使用Bootstrap 4、jQuery和防抖函数进行搜索框的制作，以下是代码：

HTML：

<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-6">
      <form>
        <div class="form-group">
          <input type="text" class="form-control" id="searchBox" placeholder="请输入搜索内容">
          <button type="submit" class="btn btn-primary mt-3">搜索</button>
          <button type="button" class="btn btn-secondary mt-3 ml-3" id="clearBtn">清除</button>
        </div>
      </form>
    </div>
  </div>
</div>

CSS：

.container {
  margin-top: 50px;
}

#searchBox {
  border-radius: 20px;
}

#clearBtn {
  display: none;
}

JavaScript：

// 防抖函数
function debounce(func, wait, immediate) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    const later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

// 清空搜索框
function clearSearchBox() {
  $("#searchBox").val("");
  $("#clearBtn").hide();
}

$(document).ready(function() {
  // 监听搜索框输入
  $("#searchBox").on("input", function() {
    if ($(this).val().length > 0) {
      $("#clearBtn").show();
    } else {
      $("#clearBtn").hide();
    }
  });

  // 监听清除按钮点击
  $("#clearBtn").on("click", function() {
    clearSearchBox();
  });

  // 监听表单提交
  $("form").on("submit", function(e) {
    e.preventDefault();
    const keyword = $("#searchBox").val().trim();
    if (keyword.length > 0) {
      // 模拟发送请求
      $("button").prop("disabled", true);
      setTimeout(function() {
        alert(`搜索关键词：${keyword}`);
        $("button").prop("disabled", false);
      }, 2000);
    }
  });

  // 防抖处理
  $("form").on("submit", debounce(function(e) {
    e.preventDefault();
  }, 500, true));
});

这个示例中，防抖函数的间隔时间为500毫秒，即当用户输入停止超过500毫秒后才会触发搜索请求。同时，当用户输入内容时，会显示清除按钮，点击清除按钮会清空搜索框；点击搜索按钮时，会模拟发送请求，并在请求返回后弹出提示框显示搜索关键词。在请求发送期间，搜索和清除按钮都会被禁用。