Prompt function of Google Music Search bar php correction code

I like google very much. search for mp3 on cnmusic, because Google Music is doing well in terms of copyright, user experience and search functions. however, there has always been a small problem with the prompt function in its search bar. the bug has existed for more than half a year.

When loading the page, quickly move the cursor to the search bar. after the page is loaded, a search prompt is displayed after the search bar is initialized. at this time, any input content will be part of the search prompt, not the search keyword. as follows:

Cause

The JavaScript in the search bar is initialized and executed on onload. because there are many Page image requests, it takes about 3 seconds to load the page completely, and the tabindex in the search bar is set to 1, the search-first user can easily encounter it.

The following is the JS code that I decomcompiled based on my own understanding. the page will execute the m. hint. initHint method during onload to add the prompt function to the search box.

The code is as follows:

/**
* Add a prompt for the search box
* @ Param searchTip prompt information
* @ Param searchBoxId: Search the input box ID
* @ Param hideBoxId the keyword hides the box 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 );
}

// Here, assign the search prompt to the temporary variable
M. hint. Gh [searchBox] = searchTip;
// If the search box exists, add a temporary variable and a gray class to the search box
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;
}
}
};

Solution
Shorten the time between DOM node loading and JavaScript initialization in the search box. you can execute JS immediately after loading the search box. Google does not need SEO for its own products. of course, it is best to execute it in DOM ready.

Extended knowledge
I remember writing an article about how to add text prompts in the WordPress search box. my solution is simple and crude. I only use the keyword in the box to determine whether it is a keyword or a prompt message. (so my prompt message is very long)

During the analysis of this case, I found that Google has a good solution and can be used for reference. it stores real search information by hiding the input box, so it can distinguish between full keywords and prompt text.

Remarks
This small problem has been bothering me for a long time (almost every time I encountered it). today I can't help but read the code. I hope Google engineers can see this article to quickly solve it. (I have provided all the suggestions for modification. if you do not change the suggestions, you can leave it alone)