谷歌音乐搜索栏的提示功能php修正代码

yipeiwu_com5年前PHP代码库

问题描述

在加载页面的时候, 将光标快速定位到搜索栏上, 待页面加载完成, 搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下:

谷歌音乐搜索栏的 bug

导致原因

搜索栏的 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文件上传判断file是否己选择上传文件的方法

本文实例讲述了PHP文件上传判断file是否己选择上传文件的方法。分享给大家供大家参考。具体方法如下: 一个合格的程序员在实现数据入库中时我们都会有一些非常严密的过滤与数据规则,像我们文...

PHP简单读取xml文件的方法示例

本文实例讲述了PHP简单读取xml文件的方法。分享给大家供大家参考,具体如下: 我将软件版本更新中的版本号等数据信息存放在xml文件中,使用时将版本信息读取出来。 xml文件内容如下:...

PHP数组 为文章加关键字连接 文章内容自动加链接

复制代码 代码如下: <?php $keys =array( array('网页特效','/js_a/js.html'), array('seo','/seo/seo.html')...

Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法

当然这个东西很吃内存,配置差点的就不推荐使用了. 最近用的时候, 发现, 建立PHP工程后,再打开 Zend Studio for Eclipse就出现这个错误 An internal...

生成ubuntu自动切换壁纸xml文件的php代码

复制代码 代码如下: <?php /* * 生成ubuntu自动切换壁纸xml文件 */ //图片目录 $dir = '/home/yuxing/background'; $hd...