源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

谷歌音乐搜索栏的提示功能php修正代码

  • 时间:2021-08-31 09:21 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:谷歌音乐搜索栏的提示功能php修正代码
[h3]问题描述[/h3] 在加载页面的时候, 将光标快速定位到搜索栏上, 待页面加载完成, 搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下: [img]http://files.jb51.net/upload/201105/20110509231753529.jpg[/img] [h3]导致原因[/h3] 搜索栏的 JavaScript 初始化执行在 onload 的时候. 因为页面图片请求多, 完全加载需要 3 秒钟左右, 并且搜索栏的 tabindex 被设为 1, 搜索优先的用户很容易就能遇到. 以下是我根据自己的理解反编译出来的 JS 代码, 页面在 onload 的时候将会执行 m.hint.initHint 方法为搜索框添加提示功能.
[u]复制代码[/u] 代码如下:
/** * 为搜索框添加提示功能 * @param searchTip 提示信息 * @param searchBoxId 搜索输入框 ID * @param hideBoxId 关键字隐藏框 ID */ m.hint.initHint = function(searchTip, searchBoxId, hideBoxId){ var searchBox = document.getElementById(searchBoxId); var hideBox = null; if(searchBox){ if(hideBoxId) { hideBox = document.getElementById(hideBoxId); } l.events.listen(searchBox, "blur", l.bind(m.hint.onInputBlur, null, searchBox, hideBox), false); l.events.listen(searchBox, "focus", l.bind(m.hint.onInputFocus, null, searchBox, hideBox), false); if(hideBox){ l.events.listen(searchBox, "change", bind(m.hint.onInputChange, null, searchBox, hideBox), false); hideBox.value = m.hint.getInputValue(searchBox); } // 在这里将搜索提示赋给临时变量 m.hint.Gh[searchBox] = searchTip; // 如果搜索框存在, 则为搜索框加上临时变量和灰色字的 class m.hint.onInputBlur(searchBox); } }; m.hint.onInputBlur = function(searchBox, hideBox) { m.hint.fi(searchBox); hideBox && m.hint.onInputChange(searchBox, hideBox); }; m.hint.fi = function(searchBox) { if(searchBox) { var searchTip = m.hint.Gh[searchBox]; if(searchTip && (searchBox.value.trim()=="" || searchBox.value==searchTip)) { searchBox.setAttribute(m.hint.IS_HINT, "1"); searchBox.className += " hint"; searchBox.value = searchTip; } } };
[b]解决办法[/b] 缩短搜索框 DOM 节点加载和 JavaScript 初始化之间的时间. 可以在搜索框加载完成后立刻执行 JS, 反正 Google 自己的产品也不需要 SEO. 当然, 最好在 DOM ready 的时候执行. [b]扩展知识[/b] 记得我写过一篇文章, 介绍如何在 WordPress 搜索框添加文字提示. 我的处理办法简单粗暴, 仅以框内关键字来判断是关键字还是提示信息. (所以我的提示信息很长) 在分析这个案例的过程中, 我发现 Google 的处理办法很好, 可以借鉴和使用. 它通过隐藏输入框来放置真正的搜索信息, 所以可以实现完全关键字和提示文案的区分. [b]后话[/b] 这个小问题已经困扰我很久了 (几乎每次遇到), 今天终于忍不住看了一下代码, 希望 Google 的工程师能够看到本文快速解决掉. (修改建议我都给出来了, 还不改也说不过去吧)
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部