谷歌音乐搜索栏的提示功能

Jul 4th, 2010 Add Comment

我很喜欢在 google.cn/music 上找 mp3, 因为谷歌音乐在版权方面, 用户体验和搜索功能都做得很好. 但是它的搜索栏提示功能一直存在一个小问题, bug 存在半年以上了吧...

问题描述

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

谷歌音乐搜索栏的 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 的工程师能够看到本文快速解决掉. (修改建议我都给出来了, 还不改也说不过去吧)

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 谷歌音乐搜索栏的提示功能

  1. http://0.gravatar.com/avatar/4cf6c956fcc271bc8ab01fc69a881690?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  2. http://0.gravatar.com/avatar/a2fc72f31225a4cee5527756fbf7a699?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    有一段时间没有,有一段时间又有,有一段时间没有

  3. http://0.gravatar.com/avatar/caf507410ad3807d1c5a5bec35a40828?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    好像没这个问题了吧.
    最近用搜索都是一次就成功
    以前都是要搜几次才能搜出来

  4. http://1.gravatar.com/avatar/902119ef569c3ac1071991a039de569e?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  5. http://0.gravatar.com/avatar/ceccb38265d7fc90c7e632db24a46897?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    我觉得Google写的代码都很整洁,很有条理....太技术了

  6. http://0.gravatar.com/avatar/07dd2bd83132c19b3e62fd3679e6f724?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    一般用下豆瓣收听音乐

  7. http://0.gravatar.com/avatar/8bc5a10d6cd90aec2d2e24b53042856f?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    我也喜欢谷歌的正版音乐 ;-)

  8. http://1.gravatar.com/avatar/1269c595124480947fc128512f1d3c6a?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    瞎猫碰到死耗子 来到贵博,围观一下,希望成为友情链接

  9. http://0.gravatar.com/avatar/647322322a86ba48dc9745d07ceaa7af?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    话说我想来找个好看的皮~~呵呵呵

  10. http://1.gravatar.com/avatar/bda09c15de8028b03a5165944368f745?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    谷歌音乐质量都很不错 可惜太少了

  11. http://0.gravatar.com/avatar/6443da71576c11dfc4aaa4bea191288e?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  12. http://1.gravatar.com/avatar/bb05acb5b9b70b8886b356d190d3bb4a?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    这个问题在人人网的一些页面也有存在。

  13. http://1.gravatar.com/avatar/78b0fd25b4aadfa50d9dde0ba2cc5d50?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    Google看此贴后,把你从阿里挖走~

  14. http://0.gravatar.com/avatar/c8f3ae648e9f2322a6c1e61f7ef763e6?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    这个也被你发现了,人才啊!

  15. http://0.gravatar.com/avatar/adead0ff8f0a8f9165e6da7780a25cdc?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  16. http://0.gravatar.com/avatar/2f64db6c95d30046036a70048f682356?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    google china 还有人?我以为都被挖走了……

    话说,你这套表情真不耐 :evil:

  17. http://1.gravatar.com/avatar/1ed4d50855f02d7ef1ed34c5f7ca34ee?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @Yafei
    好像用的某个ajax插件!

  18. http://1.gravatar.com/avatar/1ed4d50855f02d7ef1ed34c5f7ca34ee?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @mcooo
    其实我感觉谷歌的作品一直不错! :idea:

  19. http://1.gravatar.com/avatar/30d41ecc5ecf0db83f3dceb26248e6cf?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    我有一个请求,不知道合适不合适,还请帮忙。
    http://www.kriesi.at/demos/expose/default/
    上面是一个演示地址,我真的很想知道里面小图片的载入效果是如何做到的,似乎是同步的,很好看。

  20. http://1.gravatar.com/avatar/96764fa10254db0b2b86c652d693467f?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    谷歌在中国的日子也快到头了吧~
    所以呢~
    这个问题似乎一直得不到解决~

  21. http://0.gravatar.com/avatar/2a9c4f525050372a6fe0b10ce4fe8957?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    直接在 input 里添加 onfocus="this.value='';" 不行?

  22. http://0.gravatar.com/avatar/497ea247993bf5d350c9aa7796c6eb81?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    很少用呢 在上面听过

  23. http://0.gravatar.com/avatar/08047a2bf65a6cb338bc973c4054fc4c?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    好多搜索的提示都存在这个问题...

  24. http://0.gravatar.com/avatar/6c48e058ff4f910174ceef64e514f609?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    好像你很久之前就提过了。 这个BUG非常低级。

  25. http://1.gravatar.com/avatar/1cfd6b67e61a959b431aa1bc3e4f6736?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    我觉得把提示文字和输入框分开比较好,我就喜欢这么做。

  26. http://0.gravatar.com/avatar/a5948999adcf04a603bb760290c6e86e?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    顶呀,被这个烦了好久。
    上次看到你的推我也以为他们解决了这个问题,没想到问题依旧..

  27. http://1.gravatar.com/avatar/31976c826d39a95ea2f89a4cee4b9551?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    我早上也碰到这个问题,实际上还是非常容易碰到的,必须要在加载完才可以开始查询,还是蛮火大的,用户体验及其不好。

  28. http://1.gravatar.com/avatar/36b18348c69ca1d6820299b959f551fe?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    我多数用BD mp3,不怎么关注这个问题!

  29. http://1.gravatar.com/avatar/fd126aa64db6755fe66749e7870b9c9c?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    现在还有这个问题么,很久没用了

  30. http://1.gravatar.com/avatar/36b18348c69ca1d6820299b959f551fe?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    又是SEO的。。。 ;-)

  1. Loading...