• 欢迎加“百元导航”为主页,windows8风格,0.3s极速加载
  • 王柏元的博客专用搜索引擎:极客人,就用“极客搜”!
  •    12个月前 (12-30)  技术应用 算法语言 |   抢沙发  78 
    文章评分 0 次,平均分 0.0

    使用网上开源的导航站源码制作了我的导航网页“百元导航”后,总觉得它丢掉了导航网站的一个很重要的东西—搜索框。于是极客人为自己的导航站加入了搜索框的功能,支持百度搜索、好搜、极客搜、CSDN搜索、蒲公英PT搜索等(可以加代码轻松扩展),除了网站界面使用了网上的代码,逻辑处理部分的js代码全由本人实现。

    支持自动提示的多引擎的搜索框

    带搜索提示的搜索框百元导航网

    html代码:

    下面是搜索框的界面的html部分,CSS没有贴在下面,如果需要请留言:

    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;

    为了在用户切换搜索引擎后,再次打开导航页默认显示切换后的搜索引擎,可采用cookie记录searchIndex。

    下面的代码用以在切换搜索引擎时,如果搜索框不为空则自动搜索搜索框内关键词,不用点击“搜索按钮”。

    搜索框加入百度搜索自动提示

    其中搜索自动提示的功能采用了百度开放的百度搜索框提示:引入一个百度的opensug.js文件,然后在要绑定搜索提示的文本框input元素中加入baiduSug="1"。这样在绑定的搜索框中输入文字即可获得和百度一样的搜索提示。

    比如:

    网上说百度搜索提示还有很多高级用法,比如自定义搜索提示的背景颜色、字体等等。不过极客人试过发现并不支持,你可以自行尝试,成功了欢迎来王柏元的博客交流!

     

    除特别注明外,本站所有文章均为王柏元的博客原创,为了尊重作者的劳动成果,转载请注明出处http://wangbaiyuan.cn/mul-engine-auto-prompt-search-box.html,如果你觉得这篇文章对你有用,可以点击文章下面的“赞助作者”打赏作者!

    关于
    记录生活,镌刻心路;泼洒文墨,分享技术!王柏元的博客致力于IT经验交流,并原创翻译引进外文文章,打开IT国际化视野

    发表评论

    格式

    暂无评论

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册