想要实现该功能得先有一个接口–>百度搜索框数据接口

API地址后面进行拼接

wd=后面跟的就是要搜索的关键词，因此我们只需要将input框中的值传到wd=后面，然后通过jsonp跨域实现搜索功能
jsonp跨域详解
附上全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索框</title>
    <style> *{
      margin: 0; padding: 0; } ul,li{
      list-style: none; width: 300px; } a{
      text-decoration: none; } #q{
      width: 300px; box-sizing: border-box; } #ul1{
      border: 1px solid #ccc; } #ul1 li{
      margin-top: 10px; } #ul1 li:hover{
      background-color: aqua; } </style>
    <script> function show(data){
      var arr = data.s; var ul1 = document.getElementById("ul1"); ul1.innerHTML = ""; ul1.style.display = "block"; for(var i = 0;i < arr.length;i ++){
      var newLi = document.createElement("li"); var A = document.createElement("a"); A.innerHTML = arr[i]; A.href = "http://www.baidu.com/s?wd=" + arr[i]; A.target = '_blank'; newLi.appendChild(A); ul1.appendChild(newLi); } } </script>
    <script> window.onload = function() {
      var q = document.getElementById("q"); var ul1 = document.getElementById("ul1"); //给搜索框一个事件，键盘每按下抬起后执行一次函数，从而使得下拉框中的列表 //一直也在变化 q.onkeyup = function() {
      var value = this.value; if(!value) {
      ul1.style.display = "none"; }else{
      var oldscript = document.getElementById("script"); var script = document.createElement("script"); script.id = "script"; script.src = `https://suggestion.baidu.com/su?wd=${
       this.value}&cb=show`; oldscript.parentNode.replaceChild(script,oldscript); } } } </script>
</head>
<body>
    <div id="div1">
        <input type="text" id="q">
        <ul id="ul1">
        </ul>
    </div>
    <script id="script"></script>
</html>