谷歌音乐搜索栏的提示功能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自定义函数实现代码
Dec 30 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
Jul 22 PHP
基于PHP CURL获取邮箱地址的详解
Jun 03 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
Feb 18 PHP
PHP6 中可能会出现的新特性预览
Apr 04 PHP
php除数取整示例
Apr 24 PHP
php mb_substr()函数截取中文字符串应用示例
Jul 29 PHP
php版微信公众号接口实现发红包的方法
Oct 14 PHP
thinkPHP5 ACL用户权限模块用法详解
May 10 PHP
PHP实践教程之过滤、验证、转义与密码详解
Jul 24 PHP
Laravel框架模型的创建及模型对数据操作示例
May 07 PHP
smarty模板的使用方法实例分析
Sep 18 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导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP发送短信代码分享
2015/08/11 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
JQuery的html(data)方法与<script>脚本块的解决方法
2010/03/09 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python collections模块实例讲解
2014/04/07 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
Python中函数的返回值示例浅析
2019/08/28 Python
详解python statistics模块及函数用法
2019/10/27 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Python接口测试文件上传实例解析
2020/05/22 Python
学生实习推荐信范文
2013/11/26 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2014年体育工作总结
2014/11/24 职场文书
施工员岗位职责范本
2015/04/11 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
培养联系人考察意见
2015/06/01 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电