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函式 返回密碼...