搜尋自動提示功能JS優化

2021-06-28 00:15:31 字數 1463 閱讀 3670

我的部落格原文:

首先這個搜尋框如果要觸發自動提示的詞條,肯定是每次keyup(咱們老大說keyup事件在某些瀏覽器裡有問題,建議用keydown,但是我沒發現問題,而且我覺得keyup後觸發在某些情景下比keydown下要好,所以我用的keyup)事件後根據現在input裡的value值來遍歷相關聯詞條.

所以每次keyup後得到input裡的value值,都需要根據value值請求後台來返回相關詞條的內容,這裡的ajax請求是用jsonp來做的,開發那邊給到我乙個位址格式,大概是這樣:

兩個關鍵的地方就是jasoncallback和keyword,jasoncallback是jsonp的格式,然後keyword後面跟的就是搜尋的關鍵字,ajax**大概是這樣:

$.ajax(,

error: function ()

});

好了,到這裡這個功能就做好了,使用者在每次keyup之後都會呼叫ajax來請求後台資料然後顯示關聯詞條。

現在說下js優化部分,當你做到剛才說的那些之後,你會發現你每輸入乙個字母都會呼叫一次ajax,這樣的ajax呼叫太頻繁了而且沒有必要,拿最流行的搜狗拼音輸入法來說,你每輸入乙個字母,都已經是給input賦值了,這樣都會呼叫一次ajax,但是這時候的拼音所關聯的內容基本上不會是你想要的,你想要的只是打出來的漢字所關聯的內容。

我們肯定做不到根據輸入內容來判斷是否執行ajax關聯,但是我們可以對ajax呼叫做下延遲執行。這樣當使用者輸入內容時,如果兩次按鍵的間隔時間過小(我認為大概在200毫秒,可以根據自己的伺服器速度和使用者體驗來調整這個時間),就可以當做他是在繼續輸入他想要的內容,這時候沒有必要來顯示關聯內容。**如下:

var timeout = 0;

$('input').keyup(function());

},200);

});

好了,這樣就可以有效的減少沒必要的ajax請求了。

第二點優化是給ajax請求到的內容作快取,大概意思就是說,你輸入了「上海」,這時候做了一次ajax請求,然後你繼續輸「上海東方明珠」,這時候又有一次ajax請求,然後你把「東方明珠」刪掉了,這時候input裡的值是「上海」,前面已經請求過一次「上海」的ajax請求了,現在又要重複請求一次關鍵字是「上海」的ajax請求。

這樣的話就有點浪費,所以我們可以把每次ajax請求的關鍵字和請求得到的內容先存到乙個變數a中去,然後每次keyup後先判斷變數a裡有沒有這個關鍵字所請求到的內容,如果有,就讀取現有的內容,如果沒有再請求ajax,這樣又可以有效的減少ajax請求數了。

**如下:

var timeout = 0;

var ajaxcache = {};//定義快取物件

$('input').keyup(function()else

});}

},200);

});

vscode xml的自動提示功能配置

因為目前使用vscode開發非常便利,效率提公升的不是一點半點,所以試著用vscode開發spring boot,同時回顧一下之前學到的一些spring知識,但是後來發現在寫bean.xml,無法向eclipse那樣有自動提示的功能,但是在網上搜了半天沒有什麼有用的資訊,索性自己探索了半天搞出了個這...

XP自動搜尋功能修復

電腦是xp系統,自帶的搜尋功能失效了 我在網上查了一下相關技巧,總結如下 在開始 執行 輸入命令列 regsvr32 i shell32.dll regsvr32 jscript.dll regsvr32 vbscript.dll 3條命令逐個輸入,不要一起輸入,輸入命令後電腦有乙個反省過程,大約1...

PHP JS實現的實時搜尋提示功能

效果圖如下 如下 html 該 用兩種方法實現,一種jquery,一種原生js php 如下 php不僅可以考慮直接使用陣列,也可以xgdori考慮直接查詢資料庫,獲取資料庫內容,本 使用的是陣列。shandong anhui shanxi guangzhou yunnan hainan xizan...