谷歌音樂搜索欄的提示功能php修正代碼
問題描述
在加載頁面的時候, 將光標快速定位到搜索欄上, 待頁面加載完成, 搜索欄進行初始化后會顯示搜索提示. 此時輸入的任何內(nèi)容將成為搜索提示的一部分而不是搜索關鍵字. 截圖如下:
導致原因
搜索欄的 JavaScript 初始化執(zhí)行在 onload 的時候. 因為頁面圖片請求多, 完全加載需要 3 秒鐘左右, 并且搜索欄的 tabindex 被設為 1, 搜索優(yōu)先的用戶很容易就能遇到.
以下是我根據(jù)自己的理解反編譯出來的 JS 代碼, 頁面在 onload 的時候將會執(zhí)行 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 節(jié)點加載和 JavaScript 初始化之間的時間. 可以在搜索框加載完成后立刻執(zhí)行 JS, 反正 Google 自己的產(chǎn)品也不需要 SEO. 當然, 最好在 DOM ready 的時候執(zhí)行.
擴展知識
記得我寫過一篇文章, 介紹如何在 WordPress 搜索框添加文字提示. 我的處理辦法簡單粗暴, 僅以框內(nèi)關鍵字來判斷是關鍵字還是提示信息. (所以我的提示信息很長)
在分析這個案例的過程中, 我發(fā)現(xiàn) Google 的處理辦法很好, 可以借鑒和使用. 它通過隱藏輸入框來放置真正的搜索信息, 所以可以實現(xiàn)完全關鍵字和提示文案的區(qū)分.
后話
這個小問題已經(jīng)困擾我很久了 (幾乎每次遇到), 今天終于忍不住看了一下代碼, 希望 Google 的工程師能夠看到本文快速解決掉. (修改建議我都給出來了, 還不改也說不過去吧)
相關文章
PHP+JS三級菜單聯(lián)動菜單實現(xiàn)方法
這篇文章主要介紹了PHP+JS三級菜單聯(lián)動菜單實現(xiàn)方法,涉及JavaScript動態(tài)控制頁面樣式及PHP數(shù)據(jù)庫操作相關技巧,需要的朋友可以參考下2016-02-02
在WINDOWS中設置計劃任務執(zhí)行PHP文件的方法
在網(wǎng)上找了些WINDOWS執(zhí)行PHP的計劃任務的方法,有一個寫得很全,可惜在我這竟然沒通過。最后不得不綜合各門派的方法,才能在我這運行成功2011-12-12
php 網(wǎng)頁播放器用來播放在線視頻的代碼(自動判斷并選擇視頻文件類型)
其實這里的php 視頻播放代碼基本上常見的視頻格式都支持,用正則匹配文件擴展名,并根據(jù)文件擴展名的不同調用相應的在線播放器代碼。2010-06-06
php環(huán)境套包 dedeampz 偽靜態(tài)設置示例
這篇文章主要介紹了php環(huán)境套包 dedeampz 偽靜態(tài)設置,需要的朋友可以參考下2014-03-03
php中處理mysql_fetch_assoc返回來的數(shù)組 不用foreach----echo
php中處理mysql_fetch_assoc返回來的數(shù)組 不用foreach----echo的方法,需要的朋友可以參考下。2011-05-05

