仿Google的Suggest效果

2021-08-30 06:53:56 字數 1622 閱讀 2004

refer to [url=

用過google的同志都知道,在google搜尋欄裡只要輸入前幾個字元,google就會自動彈出乙個下拉列表,顯示相關記錄以及記錄數。這對正在搜尋的人是很有幫助的,當然這些相關記錄並不是隨機生成的,而是根據在google中搜尋的關鍵字生成的。

前幾天我在專案中遇到這樣的問題,需要提供乙個search bar去搜尋某資料夾下包含關鍵字的所有檔案。於是google搜尋了一下,發現網上有很多類似功能的**,有ajax,jquery,asp, php等6、7個版本。綜合比較了一下,還是選擇了乙個用js實現的庫。

實現很簡單:

第一步,為下拉列表設定樣式,如下:

/*下拉列表區域的樣式*/

#suggest

/*下拉列表區域內div的樣式*/

#suggest div

/*方向鍵的上下移動會引起選項的樣式變化*/

#suggest div.select

/*滑鼠移動到列表選項時的樣式*/

#suggest div.over

第二步,建立頁面ui,重要的是要加上乙個div塊,這是用來顯示下拉列表的地方。id可以隨便取,重要的是保持一致.

第三步,匯入suggest.js包。

第四步,寫乙個onload方法,在頁面載入的時候匯入資料。

function startsuggest() ); // options

}window.addeventlistener ?

window.addeventlistener('load', startsuggest, false) :

window.attachevent('onload', startsuggest);

function startsuggest() ); // options

}/*引數說明:

第乙個引數:文字域標籤的id

第二個引數:下拉列表區域的id

第三個引數:下拉列表的選項列表

第四個引數:可選項,具體如下。

interval : 兩次搜尋的時間間隔,預設為500毫秒。

dispmax : 可顯示的最**項數。

listtagname : 為了產生乙個標籤名字列表(預設為div) 。

prefix :向前匹配為true,部分匹配為false,預設為false。

ignorecase : 搜尋時區分大小寫,預設值為true。

highlight : 匹配字元要高亮顯示,預設值為true。

dispallkey : 按ctrl + down (opera, ctrl + alt + down), 將匹配的所有候選名單都顯示出來。

classmouseover : 滑鼠滑過時的樣式,預設為"over"。

classselect : 選中時的樣式,預設為"select"。

hookbeforesearch : 在search之前開始乙個函式的執行過程。

delim : 多個關鍵字搜尋時的分割符 (預設為空格) 。

*/window.addeventlistener ?

window.addeventlistener('load', startsuggest, false) :

window.attachevent('onload', startsuggest);

仿google分頁例項

總記錄數 每頁記錄數 當前頁數 url引數 返回乙個帶html 的分頁樣式 字串 private string pagination int total,int per,int page,string query string 計算總頁數 if per 0 next page 1 pre page ...

仿google搜尋提示

借用 url 的例子,再加以完善 1 實現了提示後資料排序的,按字串由短至長,相同長度的按字母排序。findlist.sort function a,b 2 實現了不分大小寫字母,按字母表排序。findlist.sort function a,b var intindex 0 var arrlist...

密碼強度顯示 仿Google的

js passwordstrength.js charmode函式 測試某個字元是屬於哪一類.function charmode in bittotal函式 計算出當前密碼當中一共有多少種模式 function bittotal num return modes checkstrong函式 返回密碼...