内容摘要： 搜索 这段代码放在任何网页里，都能立刻唤起一种熟悉的肌肉记忆。用户不需要说明书，看到那个放大镜图标或者“搜索”二字，手指就自己动起来了。但真正让这个搜索框“活”起来的，是背后那几行JavaScrip

搜索 这段代码放在任何网页里，仿百都能立刻唤起一种熟悉的度搜代码肌肉记忆。用户不需要说明书，索框看到那个放大镜图标或者“搜索”二字，仿百手指就自己动起来了。度搜代码但真正让这个搜索框“活”起来的索框，是仿百背后那几行JavaScript逻辑。 我见过太多人把百度搜索框想复杂了。度搜代码有人非要用框架，索框有人要搞实时下拉推荐，仿百结果页面加载了三个脚本库，度搜代码就为了一个输入框加按钮。索框其实核心就三件事：捕获输入、仿百拼接URL、度搜代码跳转。索框 先看HTML结构。input的id是给脚本用的钩子，placeholder是给用户的视觉提示。button可以不写type，但最好写上，免得在form里触发默认提交。这里我没套form标签，因为纯JS处理更干净，省得按回车时页面自己刷新。 然后是最关键的JS部分： ```javascript document.getElementById('searchBtn').onclick = function() { var keyword = document.getElementById('searchBox').value.trim(); if(keyword) { window.location.href = 'https://www.baidu.com/s?wd=' + encodeURIComponent(keyword); } }; ``` 注意那个`encodeURIComponent`。我见过新手直接拼字符串，用户输入“JavaScript 教程”里的空格和特殊字符会把URL搞崩。编码后，中文、空格、&符号都能安全传输。 还有个细节——按回车键触发搜索。用户习惯在输入框里敲回车，这比移动鼠标去点按钮快得多。加个监听： ```javascript document.getElementById('searchBox').onkeydown = function(e) { if(e.key === 'Enter') { document.getElementById('searchBtn').click(); } }; ``` 我自己的浏览器主页就放了这么个自制搜索框。没用什么花哨的CSS，白底灰边，圆角2像素。每次打开新标签页，光标自动聚焦在输入框里（加个`autofocus`属性就行），直接打字搜索，比浏览器默认的新标签页还顺手。 有人会问，为什么不用现成的百度站内搜索代码？因为那玩意儿会带一堆广告参数和logo链接。自己写，干净利落，还能完全控制样式。比如你想让输入框宽度随窗口大小变化，加个`width: 60%; min-width: 300px;`就行，百度官方给的代码可没这么灵活。 最后提醒个容易踩的坑：别把搜索框放在form标签里又忘了阻止默认提交。否则用户按回车时，页面会先跳转到当前URL加问号参数，然后你的JS才执行，结果就是白屏闪一下才进入百度。要么不用form，要么在onsubmit里`return false`。 就这些。一个搜索框，十几行代码，解决了“用户想找东西”这个最原始的需求。那些整天喊“用户体验”的大厂，底层逻辑也不过如此。