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


Posted in PHP onMay 09, 2011

问题描述

在加载页面的时候, 将光标快速定位到搜索栏上, 待页面加载完成, 搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下:

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

导致原因

搜索栏的 JavaScript 初始化执行在 onload 的时候. 因为页面图片请求多, 完全加载需要 3 秒钟左右, 并且搜索栏的 tabindex 被设为 1, 搜索优先的用户很容易就能遇到.

以下是我根据自己的理解反编译出来的 JS 代码, 页面在 onload 的时候将会执行 m.hint.initHint 方法为搜索框添加提示功能.

/** 
* 为搜索框添加提示功能 
* @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; 
} 
} 
};

解决办法
缩短搜索框 DOM 节点加载和 JavaScript 初始化之间的时间. 可以在搜索框加载完成后立刻执行 JS, 反正 Google 自己的产品也不需要 SEO. 当然, 最好在 DOM ready 的时候执行.

扩展知识
记得我写过一篇文章, 介绍如何在 WordPress 搜索框添加文字提示. 我的处理办法简单粗暴, 仅以框内关键字来判断是关键字还是提示信息. (所以我的提示信息很长)

在分析这个案例的过程中, 我发现 Google 的处理办法很好, 可以借鉴和使用. 它通过隐藏输入框来放置真正的搜索信息, 所以可以实现完全关键字和提示文案的区分.

后话
这个小问题已经困扰我很久了 (几乎每次遇到), 今天终于忍不住看了一下代码, 希望 Google 的工程师能够看到本文快速解决掉. (修改建议我都给出来了, 还不改也说不过去吧)

PHP 相关文章推荐
基于mysql的论坛(4)
Oct 09 PHP
在PHP中读取和写入WORD文档的代码
Apr 09 PHP
PHP 反射机制实现动态代理的代码
Oct 22 PHP
php设计模式 Factory(工厂模式)
Jun 26 PHP
php calender(日历)二个版本代码示例(解决2038问题)
Dec 24 PHP
php读取目录及子目录下所有文件名的方法
Oct 20 PHP
php实现统计网站在线人数的方法
May 12 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
Jul 28 PHP
PHP对象克隆clone用法示例
Sep 28 PHP
yii2的restful api路由实例详解
May 14 PHP
PHP命名空间定义与用法实例分析
Aug 14 PHP
php生成微信红包数组的方法
Sep 05 PHP
php 随机排序广告的实现代码
May 09 #PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
May 09 #PHP
PHP新手入门学习方法
May 08 #PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
May 07 #PHP
php 大数据量及海量数据处理算法总结
May 07 #PHP
php 截取字符串并以零补齐str_pad() 函数
May 07 #PHP
php调用mysql数据 dbclass类
May 07 #PHP
You might like
php数据类型判断函数有哪些
2013/09/23 PHP
PHP小教程之实现链表
2014/06/09 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP引用的调用方法分析
2016/04/25 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python 异或加密字符串的实例
2018/10/14 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python实现词法分析器
2019/01/31 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
领导视察欢迎词
2014/01/15 职场文书
业务员简历自我评价
2014/03/06 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
还款承诺书范本
2015/01/20 职场文书
建议书格式
2015/02/04 职场文书
谢师宴家长致辞
2015/07/27 职场文书
创业计划书之酒吧
2019/12/02 职场文书