浏览器会在用户有历史搜索记录之后自动弹出一些关键词供用户选择。但弹出的窗口的位置往往距离输入框过近,弹窗样式也不是特别好看。所以准备参考360,记录用户的搜索关键词,以标签的形式放在弹出窗口中,当输入框获取到焦点时,弹出自定义的窗口,提供一些用户历史记录以及搜索记录等辅助信息。
首先是为输入框关闭浏览器的关键词提示功能,审查了一下360搜索的代码,发现为输入框增加一行“autocomplete="off"”就可以关闭关键词提示功能了:
<input id="search-kw" name="q" type="text" placeholder="这里也可以搜索" autocomplete="off" style="width: 480px; padding: 0px;">
因为想要将搜索值做成标签,所以需要组装链接,因为准备将这个功能写在主题里,所以需要动态去提取页面的域名与协议信息,而不是直接用固定的值。在wordpress中一个搜索页面的链接大致如下:
https://blog.abddb.com/?s=测试搜索关键词
关键词可以在程序执行时提取input输入框的词获得。前面的协议就需要依赖js了。
利用js获取域名信息
可以用如下命令实现:
document.domain
也可以写成这样:
document.domain
利用js获取网络协议
可以用如下命令实现:
window.location.protocol
也可以写成这样:
document.location.protocol
window对象与document对象的关系
window对象表示浏览器中打开的窗口,window对象可以省略,如:alert() 等价于 window.alert()
;document对象是window对象的一部分。如:document.body 等价于 window.document.body,浏览器的html文档会成为document对象。