谷歌音乐搜索栏的提示功能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数组函数序列之sort() 对数组的元素值进行升序排序

sort()定义和用法 sort() 函数按升序对给定数组的值排序。 注释:本函数为数组中的单元赋予新的键名。原有的键名将被删除。 如果成功则返回 TRUE,否则返回 FALSE。 语法...

php可应用于面包屑导航的递归寻找家谱树实现方法

本文实例讲述了php可应用于面包屑导航的递归寻找家谱树实现方法。分享给大家供大家参考。具体实现方法如下: <?php echo "<pre>"; $area...

PHP开发的微信现金红包功能示例

本文实例讲述了PHP开发的微信现金红包功能。分享给大家供大家参考,具体如下: 微信商家后台-现金红包开发 sdk <?php class wxPay { //配置参...

php实现每天自动变换随机问候语的方法

本文实例讲述了php实现每天自动变换随机问候语的方法。分享给大家供大家参考。具体分析如下: 这里预先定义一个php数组,里面存放一些随机问候语,调用的时候指定是按照天,月还是年来自动更换...

php查询相似度最高的字符串的方法

本文实例讲述了php查询相似度最高的字符串的方法。分享给大家供大家参考。具体如下: 根据传入的字符串和数组,返回数组中相似度最高的字符串 1. PHP代码如下:  &...