谷歌音乐搜索栏的提示功能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字符串截取问题
Nov 28 PHP
php扩展ZF――Validate扩展
Jan 10 PHP
Zend Studio 无法启动的问题解决方法
Dec 04 PHP
PHP array_push 数组函数
Dec 26 PHP
php做下载文件的实现代码及文件名中乱码解决方法
Feb 03 PHP
PHP引用(&)各种使用方法实例详解
Mar 20 PHP
WebQQ最新登陆协议的用法
Dec 22 PHP
ThinkPHP实现递归无级分类――代码少
Jul 29 PHP
PHP curl模拟登录带验证码的网站
Nov 30 PHP
Laravel实现自定义错误输出内容的方法
Oct 10 PHP
phpMyAdmin无法登陆的解决方法
Apr 27 PHP
Yii2结合Workerman的websocket示例详解
Sep 10 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 ajax 分页类代码
2008/11/13 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
js常见表单应用技巧
2008/01/09 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
如何运行Python程序的方法
2013/04/21 Python
Python 文件和输入输出小结
2013/10/09 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python画环形图的方法
2020/03/25 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
Html5生成验证码的示例代码
2021/05/10 Javascript