谷歌音樂(lè)搜索欄的提示功能php修正代碼
問(wèn)題描述
在加載頁(yè)面的時(shí)候, 將光標(biāo)快速定位到搜索欄上, 待頁(yè)面加載完成, 搜索欄進(jìn)行初始化后會(huì)顯示搜索提示. 此時(shí)輸入的任何內(nèi)容將成為搜索提示的一部分而不是搜索關(guān)鍵字. 截圖如下:
導(dǎo)致原因
搜索欄的 JavaScript 初始化執(zhí)行在 onload 的時(shí)候. 因?yàn)轫?yè)面圖片請(qǐng)求多, 完全加載需要 3 秒鐘左右, 并且搜索欄的 tabindex 被設(shè)為 1, 搜索優(yōu)先的用戶很容易就能遇到.
以下是我根據(jù)自己的理解反編譯出來(lái)的 JS 代碼, 頁(yè)面在 onload 的時(shí)候?qū)?huì)執(zhí)行 m.hint.initHint 方法為搜索框添加提示功能.
/**
* 為搜索框添加提示功能
* @param searchTip 提示信息
* @param searchBoxId 搜索輸入框 ID
* @param hideBoxId 關(guān)鍵字隱藏框 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);
}
// 在這里將搜索提示賦給臨時(shí)變量
m.hint.Gh[searchBox] = searchTip;
// 如果搜索框存在, 則為搜索框加上臨時(shí)變量和灰色字的 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é)點(diǎn)加載和 JavaScript 初始化之間的時(shí)間. 可以在搜索框加載完成后立刻執(zhí)行 JS, 反正 Google 自己的產(chǎn)品也不需要 SEO. 當(dāng)然, 最好在 DOM ready 的時(shí)候執(zhí)行.
擴(kuò)展知識(shí)
記得我寫過(guò)一篇文章, 介紹如何在 WordPress 搜索框添加文字提示. 我的處理辦法簡(jiǎn)單粗暴, 僅以框內(nèi)關(guān)鍵字來(lái)判斷是關(guān)鍵字還是提示信息. (所以我的提示信息很長(zhǎng))
在分析這個(gè)案例的過(guò)程中, 我發(fā)現(xiàn) Google 的處理辦法很好, 可以借鑒和使用. 它通過(guò)隱藏輸入框來(lái)放置真正的搜索信息, 所以可以實(shí)現(xiàn)完全關(guān)鍵字和提示文案的區(qū)分.
后話
這個(gè)小問(wèn)題已經(jīng)困擾我很久了 (幾乎每次遇到), 今天終于忍不住看了一下代碼, 希望 Google 的工程師能夠看到本文快速解決掉. (修改建議我都給出來(lái)了, 還不改也說(shuō)不過(guò)去吧)
- php+ajax做仿百度搜索下拉自動(dòng)提示框(有實(shí)例)
- php 搜索框提示(自動(dòng)完成)實(shí)例代碼
- jquery+php實(shí)現(xiàn)搜索框自動(dòng)提示
- 利用PHP+JS實(shí)現(xiàn)搜索自動(dòng)提示(實(shí)例)
- PHP 搜索查詢功能實(shí)現(xiàn)
- php站內(nèi)搜索并高亮顯示關(guān)鍵字的實(shí)現(xiàn)代碼
- PHP獲取搜索引擎關(guān)鍵字來(lái)源的函數(shù)(支持百度和谷歌等搜索引擎)
- PHP寫的獲取各搜索蜘蛛爬行記錄代碼
- php使用正則表達(dá)式進(jìn)行字符串搜索的方法
- PHP+JS實(shí)現(xiàn)的實(shí)時(shí)搜索提示功能
相關(guān)文章
解析PHP SPL標(biāo)準(zhǔn)庫(kù)的用法(遍歷目錄,查找固定條件的文件)
本篇文章是對(duì)PHP中SPL標(biāo)準(zhǔn)庫(kù)的用法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06

php 數(shù)組字符串搜索array_search技巧

php設(shè)計(jì)模式 Bridge (橋接模式)