谷歌音乐搜索栏的提示功能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 相关文章推荐
Win2000+Apache+MySql+PHP4+PERL安装使用小结
Oct 09 PHP
php 删除记录实现代码
Mar 12 PHP
php生成图形(Libchart)实例
Nov 06 PHP
curl实现站外采集的方法和技巧
Jan 31 PHP
PHP封装分页函数实现文本分页和数字分页
Oct 23 PHP
smarty中post用法实例
Nov 28 PHP
php实现httpRequest的方法
Mar 13 PHP
Laravel 5框架学习之子视图和表单复用
Apr 09 PHP
php编写批量生成不重复的卡号密码代码
May 14 PHP
php发送http请求的常用方法分析
Nov 08 PHP
PHP XML Expat解析器知识点总结
Feb 15 PHP
php字符串截取函数mb_substr用法实例分析
Jun 25 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 获取完整url地址
2008/12/20 PHP
php数组删除元素示例
2014/03/21 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php实现通过ftp上传文件
2015/06/19 PHP
详解php实现页面静态化原理
2017/06/21 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
js 学习笔记(三)
2009/12/29 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python 处理数据的实例详解
2017/08/10 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
应届专科生个人的自我评价
2014/01/05 职场文书
执行总经理岗位职责
2014/02/03 职场文书
红旗方阵解说词
2014/02/12 职场文书
超市店庆活动方案
2014/08/31 职场文书
就业推荐表院系意见
2015/06/05 职场文书
人代会简报
2015/07/21 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP