谷歌音乐搜索栏的提示功能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中session的实现原理以及大网站应用应注意的问题
Jun 17 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
Oct 30 PHP
php中有关合并某一字段键值相同的数组合并的改进
Mar 10 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
Sep 30 PHP
PHP+ajax分页实例简析
Dec 07 PHP
PHP.vs.JAVA
Apr 29 PHP
php分页原理 分页代码 分页类制作教程
Sep 23 PHP
微信公众号开发之通过接口删除菜单
Feb 20 PHP
php实现支持中文的文件下载功能示例
Aug 30 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
Jun 04 PHP
Swoole实现异步投递task任务案例详解
Apr 02 PHP
Laravel监听数据库访问,打印SQL的例子
Oct 24 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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
Python 除法小技巧
2008/09/06 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
如何使用PHP session
2015/04/21 面试题
ktv好的活动方案
2014/08/17 职场文书
好的促销活动方案
2014/08/21 职场文书
施工安全协议书
2016/03/22 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
python在package下继续嵌套一个package
2022/04/14 Python