谷歌音乐搜索栏的提示功能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 相关文章推荐
PHP 采集心得技巧
May 15 PHP
php include加载文件两种方式效率比较
Aug 08 PHP
PHP如何解决网站大流量与高并发的问题
Jun 25 PHP
jQuery+php实现ajax文件即时上传的详解
Jun 17 PHP
PHP5各个版本的新功能和新特性总结
Mar 16 PHP
ThinkPHP令牌验证实例
Jun 18 PHP
php自定义hash函数实例
May 05 PHP
PHP模板解析类实例
Jul 09 PHP
PHP 进度条函数的简单实例
Sep 19 PHP
php实现微信支付之企业付款
May 30 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
Aug 06 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
Apr 14 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
Vuex的actions属性的具体使用
2019/04/14 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
python返回昨天日期的方法
2015/05/13 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python实现自动发送邮件
2018/06/20 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
心得体会范文
2014/01/04 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
创业计划书之餐饮
2019/09/02 职场文书