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

赞 (0)

相关推荐

  • python中使用百度音乐搜索的api下载指定歌曲的lrc歌词

    这次这个真的是干货哦,昨晚弄了半晚上,,,,从8点吃完饭就开始写,一直到了快12点才弄好,,,新手,伤不起呀.... 先简单的说下吧,百度提供了一个音乐搜索的api,你想百度请求类似于 http://box.zhangmen.baidu.com/x?op=12&count=1&title=最佳损友$$陈奕迅$$$$ 的地址,百度会给你返回一段xml,如下所示 This XML file does not appear to have any style information associ

  • Python实现提取谷歌音乐搜索结果的方法

    本文实例讲述了Python实现提取谷歌音乐搜索结果的方法.分享给大家供大家参考.具体如下: Python的简单脚本,用于提取谷歌音乐搜索页面中的歌曲信息,包括歌曲名,作者,专辑名,现在链接等,最多只提取10页结果. #! /usr/bin/env python #coding=utf-8 ''' Created on 2011-8-19 @author: yaoboyuan ''' from urllib import request,parse import re,sys def extrac

  • Python通过90行代码搭建一个音乐搜索工具

    下面小编把具体实现代码给大家分享如下: 之前一段时间读到了这篇博客,其中描述了作者如何用java实现国外著名音乐搜索工具shazam的基本功能.其中所提到的文章又将我引向了关于shazam的一篇论文及另外一篇博客.读完之后发现其中的原理并不十分复杂,但是方法对噪音的健壮性却非常好,出于好奇决定自己用python自己实现了一个简单的音乐搜索工具-- Song Finder, 它的核心功能被封装在SFEngine 中,第三方依赖方面只使用到了 scipy. 工具demo 这个demo在ipython

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

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

    问题描述 在加载页面的时候, 将光标快速定位到搜索栏上, 待页面加载完成, 搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下: 导致原因 搜索栏的 JavaScript 初始化执行在 onload 的时候. 因为页面图片请求多, 完全加载需要 3 秒钟左右, 并且搜索栏的 tabindex 被设为 1, 搜索优先的用户很容易就能遇到. 以下是我根据自己的理解反编译出来的 JS 代码, 页面在 onload 的时候将会执行 m.hint.in

  • JavaScript实现邮箱后缀提示功能的示例代码

    先来个基础的 需求 根据下面需求实现如示意图所示的邮箱输入提示功能,注意,根据要求只需实现下面功能 当用户没有任何输入时,提示框消失 当用户输入字符后,显示提示框,并且把用户输入的内容自动拼上邮箱后缀进行显示 暂时不用考虑示意图中的红色和蓝色背景色的逻辑 注意用户输入中前后空格需要去除 小优化编码 需求 如果我们输入的是 abc@1,这个时候出现的提示框内容是 abc@1@163.com abc@1@gmail.com abc@1@126.com -- 很明显,上面的提示框不是一个符合用户需求的

  • .NET+JS对用户输入内容进行字数提示功能的实例代码

    第一步:以下是核心代码,在页面引用或进行封装都可. 复制代码 代码如下: <script language="javascript" type="text/javascript"> function textLimitCheck(thisArea, maxLength, SpanId) { if (thisArea.value.length > maxLength) { thisArea.value = thisArea.value.substri

  • ajax实时任务提示功能的实现代码第1/2页

    项目代码结构见 我之前写的[EXT/FCKEditor 集成 -- AJAX UI -- 一种web开发的新的思维,要及时转换思想]一文. 中的 ├─taskofpig │ ├─Controller │ ├─Dao │ ├─js │ ├─music │ ├─tpl │ ├─tpl_c │ └─_log 项目代码如下: db.sql SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for ta

  • PHP+JS实现的实时搜索提示功能

    PHP+JS实现的实时搜索提示功能

    本文实例讲述了PHP+JS实现的实时搜索提示功能.分享给大家供大家参考,具体如下: 效果图如下: 代码如下: HTML代码:(该代码用两种方法实现,一种Jquery,一种原生JS) <html> <head> <script src="/DelphiRequest/search/js/jquery.js"></script> <script> /*用原生js实现 // function showResult(str) // {

  • jquery实现邮箱自动填充提示功能

    jquery实现邮箱自动填充提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "mailListBox", //外部box样式 listClass: "

  • VUE实现密码验证与提示功能

    本文实例为大家分享了VUE密码验证与提示功能的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 vue项目中,为了较为明了的让用户看到所输入的密码信息的长度与复杂度是否满足要求,开发一个组件来满足此需求(当密码输入时进行密码验证操作,当密码的长度在8到24位之间,密码中包含数字/小写字母/大写字母/特殊字符中的三项或三项以上则位正确). 1.2 条件与思路 1.密码框得到焦点显示提示信息 2.验证密码长度在8到24位之间 3.验证密码复杂度(数字/小写字母/大写字母/特殊字符三项或三

  • js输入框邮箱自动提示功能代码实现

    同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的. HTML代码如下: 复制代码 代码如下: <div class="parentCls">    <input type="text" class="inputElem"> </div> 其实上面的div标签都可以不需要 只需要在input输入框 且父

  • Servlet+Ajax实现智能搜索框智能提示功能

    Servlet+Ajax实现智能搜索框智能提示功能

    利用无刷新技术智能变换搜索框的提示,同百度搜索 效果图 其基本原理: 1.给搜索框编写js绑定事件onkeyup(键盘输入时).onfocus(当鼠标点击搜索框外的时候清空提示) 2.首先获得用户输入.之后将获得的数据传给服务器,服务器将数据传给后台,后台获取服务器传来的数据进行处理,得到关联数据,向前端返回json格式,前端通过回调函数,将返回来的json解析成文本,将文本传输到搜索框下方的展示窗 如下为支持json的jar包 search.jsp <%@ page language="

  • jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

    jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例

    本文实例讲述了jQuery实现可兼容IE6的淡入淡出效果告警提示功能.分享给大家供大家参考,具体如下: 其实我觉得告警提示的话,直接用一个Alert就最好的.开门见山,直接让用户明白你当前系统的意思,关键是Alert这东西就是再破的浏览器都必须兼容,不然你它丫的做毛浏览器啊?但是,在现在越来越觉得Alert不美观,而且开始有"弹窗挺吓人"的思潮,因此,告警提示你必须做得好看一点.在Javascript的透明度的操控比较艰难的前提下,jQuery的简单淡入淡出效果是你的选择.之所以选择j

随机推荐