谷歌音乐搜索栏的提示功能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截取中文字符串的问题
Jul 12 PHP
PHP缓存技术的多种方法小结
Aug 14 PHP
用php实现选择排序的解决方法
May 04 PHP
Yii2.0高级框架数据库增删改查的一些操作
Nov 16 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
Sep 11 PHP
Thinkphp 中 distinct 的用法解析
Dec 14 PHP
php自定义函数实现统计中文字符串长度的方法小结
Apr 15 PHP
PHP实现的文件上传类与用法详解
Jul 05 PHP
Laravel find in set排序实例
Oct 09 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
Oct 20 PHP
YII2框架中日志的配置与使用方法实例分析
Mar 18 PHP
php解析非标准json、非规范json的方式实例
Dec 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
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
javascript的BOM
2016/05/03 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
Python中replace方法实例分析
2014/08/20 Python
Python正规则表达式学习指南
2016/08/02 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
项目计划书范文
2014/01/09 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
医药营销个人求职信
2014/04/12 职场文书
小学生期末评语
2014/04/21 职场文书
春节联欢会策划方案
2014/05/16 职场文书
合作经营协议书范本
2014/09/16 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS
table不让td文字溢出操作方法
2022/12/24 HTML / CSS