jquery autocompleter
1.0.0
此處：Crayola 顏色範例。
節點管理：
npm install --save jquery-autocompleter
紗：
yarn add jquery-autocompleter
包括 jQuery：
< script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " > </ script >包括插件的程式碼：
<!-- Styles -->
< link rel =" stylesheet " href =" css/jquery.autocompleter.css " />
<!-- Scripts -->
< script src =" js/jquery.autocompleter.min.js " > </ script >調用插件：
$ ( "input" ) . autocompleter ( {
/* options */
} ) ; 遠端網址
$ ( function ( ) {
$ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
} ) ;清楚的
var data = [
{ value : 1 , label : "one" } ,
{ value : 2 , label : "two" } ,
{ value : 3 , label : "three" } ,
] ;
$ ( function ( ) {
$ ( "input" ) . autocompleter ( { source : data } ) ;
} ) ; 自動完成器有以下選項：
| 姓名 | 類型 | 描述 | 預設值 |
|---|---|---|---|
| 來源 | 字串、對象 | 伺服器或本機物件的 URL | 無效的 |
| 作為本地 | 布林值 | 將遠端響應解析為本機來源 | 錯誤的 |
| 空的 | 布林值 | 如果值為空則啟動 | 真的 |
| 限制 | 整數 | 顯示結果數 | 10 |
| 最小長度 | 整數 | 自動完成器的最小長度 | 0 |
| 延遲 | 整數 | 延遲請求幾毫秒 | 0 |
| 自訂類別 | 大批 | 具有自動完成器元素的自訂類別的數組 | [] |
| 快取 | 布林值 | 將xhr資料儲存到localStorage，避免重複要求 | 真的 |
| 快取過期 | 整數 | localStorage 資料生命週期（以秒為單位）（0 表示停用快取過期） | 86400 |
| 焦點打開 | 布林值 | 當輸入獲得焦點時啟動自動完成程序 | 真的 |
| 輸入選擇 | 布林值 | 允許使用 Enter 鍵進行選擇 | 真的 |
| 暗示 | 布林值 | 使用第一個符合的標籤為輸入新增提示，應安裝正確的樣式 | 錯誤的 |
| 選擇第一個 | 布林值 | 如果設定為true ，自動完成清單中的第一個元素將自動選擇，如果changeWhenSelect開啟則忽略 | 錯誤的 |
| 選擇時更改 | 布林值 | 允許使用自動完成清單中的箭頭鍵導覽變更輸入值 | 真的 |
| 高亮匹配 | 布林值 | 此選項定義自動完成結果中符合項目的<strong>標籤換行 | 錯誤的 |
| 忽略的鍵碼 | 大批 | 具有可忽略鍵碼的數組，預設： 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145 | [] |
| 自訂標籤 | 斯特 | 將用作標籤的物件屬性的名稱 | 錯誤的 |
| 自訂值 | 斯特 | 將用作值的物件屬性的名稱 | 錯誤的 |
| 發送前 | 功能 | 該函數在ajax請求之前觸發 | $.noop |
| 在顯示之前 | 功能 | 當列表準備好顯示時觸發此函數 | $.noop |
| 空時 | 功能 | 如果資料列表為空，則觸發該函數 | $.noop |
| 項目上 | 功能 | 當每個項目準備顯示時觸發此函數 | $.noop |
| 清單打開 | 功能 | 此函數在列表顯示時觸發 | $.noop |
| 關閉清單 | 功能 | 此函數在清單隱藏時觸發 | $.noop |
| 啟動前 | 功能 | 該事件在新請求之前觸發（包括本地快取） | $.noop |
| 範本 | 斯特 | 列表項的自訂範本。例如： <span>{{ label }} is {{ customPropertyFromSource }}</span> 。模板附加到.autocompleter-item 。 | 錯誤的 |
| 抵銷 | 斯特 | 來源回應偏移量，例如： "response.items.posts" 。@deprecated使用 format代替 | 錯誤的 |
| 格式 | 功能 | 格式化響應負載以返回來源數據 | 無效的 |
| 結合 | 功能 | 傳回一個擴展ajax資料的物件。如果您想傳遞一些額外的伺服器選項，則很有用 | $.noop |
| 打回來 | 功能 | 選擇值回調函數。參數： value 、 index 、 object | $.noop |
$ ( "#input" ) . autocompleter ( "option" , data ) ;例如：
$ ( "#input" ) . autocompleter ( "option" , {
limit : 5 ,
template :
'<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ; $ ( "#input" ) . autocompleter ( "open" ) ; $ ( "#input" ) . autocompleter ( "close" ) ; $ ( "#input" ) . autocompleter ( "destroy" ) ; $ . autocompleter ( "clearCache" ) ; $ . autocompleter ( "defaults" , {
customClass : "myClassForAutocompleter" ,
} ) ; 用於名字輸入的自動完成程序，具有快取、匹配突出顯示和 5 個結果限制。遠端響應取決於性別：
< fieldset >
< label > Male </ label >
< input type =" radio " name =" gender " value =" male " checked =" checked " />
< label > Female </ label >
< input type =" radio " name =" gender " value =" female " />
< label > Other </ label >
< input type =" radio " name =" gender " value =" other " />
< label > First Name </ label >
< input type =" text " name =" firstname " id =" firstname " />
</ fieldset > $ ( function ( ) {
$ ( "#firstname" ) . autocompleter ( {
source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
limit : 5 ,
cache : true ,
combine : function ( params ) {
var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;
// passing params to match endpoint
return {
q : params . query ,
count : params . limit ,
gender : gender ,
} ;
} ,
format : function ( data ) {
// map response data to match autocompleter
return data . entries . map ( function ( item ) {
return {
label : item . name ,
value : item . slug ,
} ;
} ) ;
} ,
callback : function ( value , index , object ) {
console . log (
"Value " + value + " are selected (with index " + index + ")."
) ;
console . log ( object ) ;
} ,
} ) ;
} ) ; div (node) -> ul (list) -> li (item) 。
< div class =" autocompleter " id =" autocompleter-1 " >
< ul class =" autocompleter-list " >
< li class =" autocompleter-item " > First </ li >
<!-- ... -->
< li class =" autocompleter-item " > Last </ li >
</ ul >
</ div >
