html

<section data-class="text">
    
    
<form id="dbbd"  >
 
<input type="text" name="word" id="kw" onkeydown="if (!window.__cfRLUnblockHandlers) return false; if(isEnter(event)){bdyx.click();return false;}" placeholder="百度一下,你就知道" data-cf-modified-6bbfa88c0c8174bd5ca221a2-="">
<input type="button" onclick="if (!window.__cfRLUnblockHandlers) return false; formSubmit()" id="bdyx" value="百度一下" data-cf-modified-6bbfa88c0c8174bd5ca221a2-="">
</form>
    </section>

javascript

function formSubmit(){
    var searchValue=document.getElementById("kw").value;
    var submitValue=searchValue;
    var a=document.createElement('a');
    var href="https://baidu.com/s?word=" + submitValue;
    a.setAttribute('href',href);
    a.setAttribute('target','_blank');
    a.setAttribute('id','myLink');
    if(document.getElementById("myLink")){
        document.body.removeChild(document.getElementById("myLink"));
       }    
    document.body.appendChild(a);
    a.click();
}
 function isEnter(ev)
{
var ev = ev || window.event;
var keycode;
if(window.event) keycode = ev.keyCode;
else keycode = ev.which;
if(keycode == 10 || keycode == 13) return true;
else return false;
}


css

#bdyx{         cursor: pointer;
    width:120px;
    height: 44px;
    line-height: 45px;

    background-color: #4e6ef2;
    font-size: 1rem;
    color: #fff;
    box-shadow: none;
    font-weight: 400;
    border: none;
                
}

#kw{
      max-width: 500px;
height: 44px;
width: 70%;

       font-size: 1rem;
    border: 2px solid #c4c7ce;
    box-shadow: none;
    background: #fff;
    color: #222;
    overflow: hidden;
    
    
}
#kw:focus {
    border-color: #000;

    
}
#dbbd{text-align: center;

}

#bdyx:hover {
    background-color: #333;
}


2022-11-19T16:26:07.png

js

 function search() {
            if (document.getElementById("kw").value != "") {
                window.location.href = "https://www.baidu.com/s?wd=" + document.getElementById("kw").value;
                
            }
            return false;
        }

html

<div class="u" style="text-align: center;">
            <form  onsubmit="return search()">
                <input id="kw" type=text  autocomplete="off" autofocus>
                <button id="bdyx" onclick="return search()">百度一下</button>
        </form>
        </div>

2023-01-06T18:01:41.png

参考
js小练习--百度输入框搜索_一只829的博客-CSDN博客
https://blog.csdn.net/qq_63533863/article/details/123696475

百度联想词搜索框完整实现 - 灰信网(软件开发博客聚合)
https://www.freesion.com/article/1128109004/