谷歌浏览器地址栏按TAB 自动切换到搜索框
一般的查询是这么操作的
- 浏览器地址栏输入
baidu.com - 页面响应完成之后,在搜索框输入待检索的字符,点击搜索按钮或
Enter键 - 百度返回响应
支持open search 之后可以这么操作
- 在地址栏输入
baidu.com按Tab键 - 直接输入待检索的字符
- 百度返回响应
为网站添加open search支持,可以支持站外搜索.
先看一下百度是怎么做的
在baidu.com页面f12查看link标签
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索">
继续看一下content-search.xml
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>百度搜索</ShortName>
<Url type="text/html" template="https://www.baidu.com/s?wd={searchTerms}"/>
</OpenSearchDescription>
自己玩一下
以https://weihai4099.github.io为例.它是一个纯静态网站,没有后台没有数据库,全部以前端模板构建完成.
想为它添加一个全站搜索,按照套路是不可能的,但是我们可以借助github的仓库内搜索.间接达到效果.
一共需要添加一个文件,修改一个文件
在_includes/head.html添加link标签
<!--自定义 open search 搜索-->
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="custom搜索">
添加content-search.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>weihai4099</ShortName>
<Url type="text/html" template="https://github.com/weihai4099/weihai4099.github.io/search?utf8=%E2%9C%93&q={searchTerms}&type="/>
</OpenSearchDescription>
最后 git commit and git push就可以在浏览器地址栏输入weihai4099.github.io+Tab+待检索的字符.进行全站搜索.
后期可以在页面添加一个搜索框,js拼接字符串进行页面跳转,效果会更好