使用网上开源的导航站源码制作了我的导航网页“百元导航”后，总觉得它丢掉了导航网站的一个很重要的东西—搜索框。于是极客人为自己的导航站加入了搜索框的功能，支持百度搜索、好搜、极客搜、CSDN搜索、蒲公英PT搜索等（可以加代码轻松扩展），除了网站界面使用了网上的代码，逻辑处理部分的js代码全由本人实现。
带搜索提示的搜索框百元导航网
html代码：
下面是搜索框的界面的html部分，CSS没有贴在下面，如果需要请留言：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="search radius6"> <form id="searchform" method="GET" action="https://www.baidu.com/s" target="_blank"> <div id="params" style="display:none"> <input name="ie" value="UTF-8" type="hidden"> </div> <select id="choose" value="0"> <option value="0">百度</option> <option value="1">极客搜</option> <option value="2">谷歌</option> <option value="3">好搜</option> <option value="4">搜狗</option> </select> <input baiduSug="1" class="inp_srh" id="keyword" name="wd" placeholder="请输入您要搜索的内容"> <input class="btn_srh" id="submit" type="submit" value="搜索"> </form> </div> |
javascript代码
要想搜索框支持多搜索引擎切换，首先需要掌握搜索引擎搜索关键词的URL参数，查看有几个GET参数（搜索引擎一般都是用GET传值的），比如下面是搜索引擎搜索“王柏元的博客”的结果页的URL：
https://www.baidu.com/s?ie=UTF-8&wd=%E7%8E%8B%E6%9F%8F%E5%85%83
？ie后面是编码格式，wd后面是搜索的关键词的URLEncode编码。
所以只要做一个表单，在表单内部加入name="ie"的DOM元素，这个元素没有必要在界面上显示，可以在CSS样式中加入“display:none”，下面的addparams函数实现的就是这一功能；再加入name="wd"的文本框，就是输入关键词的那个搜索框。最后将表单的action设置为百度搜索关键词网址：https://www.baidu.com/s
下面的setEngine函数就是切换搜索引擎的函数。传入searchIndex，就是html中select下option的value；
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script type="text/javascript"> function addParams(name,value){ $("#params").append('<input name="'+name+'" value="'+value+'" type="hidden">'); } function setSearchEngine(searchIndex){ var jk="http://so.wangbaiyuan.cn/cse/search"; var bd="https://www.baidu.com/s"; var gg="https://www.google.com/search"; var hs="https://www.haosou.com/s"; var sg="https://www.sogou.com/sogou"; var actions=[bd,jk,gg,hs,sg]; $.cookie("searchId",searchIndex, {expires:30} ); var keywordflag=["wd","q","q","q","query"]; $("#params").empty(); $("#searchform").attr("action",actions[searchIndex]); $("#keyword").attr("name",keywordflag[searchIndex]); switch(searchIndex){ case "0": addParams("ie","UTF-8"); break; case "1": addParams("s","12193527087847762795"); addParams("nsid","1"); addParams("entry","1"); break; case "2": addParams("ie","UTF-8"); break; case "3": addParams("ie","UTF-8"); break; case "4": addParams("ie","UTF-8"); break; default: addParams("ie","UTF-8"); } } |
为了在用户切换搜索引擎后，再次打开导航页默认显示切换后的搜索引擎，可采用cookie记录searchIndex。
|
1 2 3 4 5 6 7 8 9 |
var serachId=Number($.cookie("searchId")); if(serachId !== null && serachId !== undefined) serachId=serachId; else serachId=0; $("#choose option[value='"+serachId+"']").attr("selected", "selected"); setSearchEngine(serachId.toString()); $("#keyword").focus(); |
下面的代码用以在切换搜索引擎时，如果搜索框不为空则自动搜索搜索框内关键词，不用点击“搜索按钮”。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script language="JavaScript"> $(document).ready(function(){ $("#choose").change(function(){ var sindex=$("#choose").val(); setSearchEngine(sindex); function isNull( str ){ if ( str == "" ) return true; var regu = "^[ ]+$"; var re = new RegExp(regu); return re.test(str); } var strings=$("#keyword").val(); if (!isNull( strings )) { $("#submit").click(); } }); $.ajaxSetup({ cache: true, scriptCharset:'GBK' }); }); </script> |
搜索框加入百度搜索自动提示
其中搜索自动提示的功能采用了百度开放的百度搜索框提示：引入一个百度的opensug.js文件，然后在要绑定搜索提示的文本框input元素中加入baiduSug="1"。这样在绑定的搜索框中输入文字即可获得和百度一样的搜索提示。
比如：
|
1 |
<input baiduSug="1" class="inp_srh" id="keyword" name="wd" placeholder="请输入您要搜索的内容"> |
网上说百度搜索提示还有很多高级用法，比如自定义搜索提示的背景颜色、字体等等。不过极客人试过发现并不支持，你可以自行尝试，成功了欢迎来王柏元的博客交流！
除特别注明外，本站所有文章均为王柏元的博客原创，为了尊重作者的劳动成果，转载请注明出处http://wangbaiyuan.cn/mul-engine-auto-prompt-search-box.html，如果你觉得这篇文章对你有用，可以点击文章下面的“赞助作者”打赏作者！
暂无评论