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

yipeiwu_com6年前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实现链式操作的三种方法详解

本文实例讲述了PHP实现链式操作的三种方法。分享给大家供大家参考,具体如下: 在php中有很多字符串函数,例如要先过滤字符串收尾的空格,再求出其长度,一般的写法是: strlen(t...

PHP form 表单传参明细研究

为什么呢?因为表单的处理有GET和POST两种,怎么在这两种表单中都要传递一直do参数,而且要在后台通过同样的方式获取就一直是个很困惑的问题,今天经过几个小时的实验终于搞懂了,特发此文。...

C# Assembly类访问程序集信息

C#中通过Assembly类可以访问程序集信息. 1.允许访问给定程序集的元元素,包含可以加载和执行程序集的方法; 2.加载程序集:使用静态方法Assembly.Load(程序集名称)或...

PHP callback函数使用方法和注意事项

在PHP中有些诸如 call_user_function() 或 usort() 的函数接受用户自定义的函数作为一个参数。Callback 函数不仅可以是一个简单的函数,它还可以是一个对...

PHP完全二叉树定义与实现方法示例

PHP完全二叉树定义与实现方法示例

本文实例讲述了PHP完全二叉树定义与实现方法。分享给大家供大家参考,具体如下: 若设二叉树的深度为h,除第 h 层外,其它各层 (1~h-1) 的结点数都达到最大个数,第 h 层所有的结...