smartComplete——輕量級的autoComplete插件，開源 - vajoy－IT工程師數位筆記本

文章出處

項目后端覺得autoComplete響應略慢，于是花了兩天時間寫了這插件，基于jQuery 1.7+，倉庫地址 https://github.com/VaJoy/smartComplete ，歡迎各種star。

要注意的是，smartComplete只處理從后端接收到響應數據的情況就生成數據選擇列表的情況，數據匹配工作交給后端去做了，沒有前端匹配功能。

smartComplete具有 數據緩存 和 檢測拼音模式 的功能。前者會將曾經接收到的響應數據緩存起來，后續請求數據會先到緩存中哈希一下，若沒取到才發送請求；而后者指的是在chrome下打拼音時，可以忽略打拼音的過程、不把文本框內顯示的元音字符作為新增數據發送請求。

因此smartComplete一來可以加快數據獲取速度，二來可以有效減少客戶端向后端發送的冗余請求數量：

另外smartComplete也具有良好的防抖功能，默認為300ms的延時，可以通過參數修改該值。同時也能保障異步請求下，服務端返回數據順序的正確性，smartComplete在收到響應數據時會先判斷其是否為最新請求對應的響應數據，如果不是，就只將數據存入緩存中但不顯示到列表上。

使用方法

引入jQuery和smartcomplete腳本文件后，使用 $("input").smartComplete([OPTION]) 的形式進行綁定即可，可參考github上的示例：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>demo</title>
  <style>
    div{
      position: absolute;
      margin: 110px;
      background: yellow;
    }
    div>input{
      outline: none;
      margin: 50px;
      padding: 5px 10px;
    }
    .abc>li:nth-child(odd){
      background: #FFFFBF !important;
    }
    .abc>li:hover{
      background: #BFFFBF !important;
      color:#FF8000 !important;
      font-weight: bold;
    }
  </style>
  <script src="jq.js" type="text/javascript"></script>
  <script src="smartcomplete.js" type="text/javascript"></script>
</head>
<body>
  <input id="a" type="search" autocomplete="off"/>

  <div>
    <input type="search" autocomplete="off"/>
    <input type="search" autocomplete="off"/>
  </div>

  <script>
    $("#a").smartComplete({
      url:"result.json",  //服務端地址，此處我們使用JSON來模擬數據
      ulClass:"abc"
    });

    $("div>input").smartComplete({
      url:"result.json",
      matchPY:!1,   //忽略拼音打字過程
      actFontColor:"red",
      callback:function(data){  //回調，參數為選中數據項的對應數據
        console.log(data.id,data.text)
      }
    });
  </script>
</body>
</html>

響應數據模擬（result.json）：

[{"text":"福田體育", "id":"2052"},
{"text":"福田體育公園16L測試組（A3A2A733D1）", "id":"2051"},
{"text":"福田體育公園16L測試組（2EA41D3BB6）", "id":"1873"},
{"text":"福田體育公園16L測試組（A4E9BB30B6）", "id":"1874"},
{"text":"福田體育公園16L測試組（0DC7A7F19A  ）", "id":"1875"},
{"text":"福田體育公園16L測試組（4DDD4B52A4）", "id":"1876"}]

效果如下：

OPTION選項：

url

服務器url路徑，用于Ajax請求數據

ulClass

數據列表（ul）的自定義樣式，示例：

    <style>
    .abc>li:nth-child(odd){
        background: #FFFFBF !important;
    }
    .abc>li:hover{
        background: #BFFFBF !important;
        color:#FF8000 !important;
        font-weight: bold;
    }
    </style>
    <script>
    $("#a").smartComplete({
        url:"result.json",  //url of SEVER
        ulClass:"abc"
        });
    </script>

borderColor

數據列表（ul）的邊框顏色，默認為#bbb。

fontColor

數據列表的文本顏色，默認為黑色。

actBgColor

鼠標移動到數據列表項（li）上時，該激活項的背景顏色，默認為#ddd。

actFontColor

鼠標移動到數據列表項（li）上時，該激活項的文本顏色，默認為黑色。

fontSize

數據列表的文本字號大小，默認為12px。

lineHeight

數據列表的文本行高（line-height），默認為16px。

maxHeight

數據列表允許顯示的最大高度（max-height），默認為150px。

method Ajax

請求數據時的方法，默認為"post"

matchPY

boolean值，決定是否要匹配拼音模式下的拼寫過程（主要用于chrome），默認為true。若不希望匹配設為false即可。

reg

過濾文本框輸入內容的正則，默認為/'|(^\s+)|(\s+$)/g，即trim一下，并且過濾掉拼音模式下的分節符“'”。

defer

延時請求的間隔時間，默認為300ms。

zIndex

數據列表的z-index，默認為9999999。

encode

boolean值，決定是否把請求參數編碼（encodeURIComponent）后再發送到服務器，默認為false。

callback

回調函數，當用戶選中數據列表中某個選項后觸發。該函數有一個參數，為選中數據項的對應數據，示例：

$("input").smartComplete({
    url:"result.json",
    callback:function(data){
      console.log(data.id,data.text)
    }
});

smartComplete設計過程遇到的比較坑的地方，還是對拼音模式下打字過程的處理，主要是瀏覽器之間的行為不兼容：

在Firefox下拼音過程keydown值為0且只觸發一次，且監聽不到keyup（選中時可監聽到）。

在Chrome下拼音過程keydown值為229（即使選中），能監聽keyup，但回車時keyup不觸發。

在IE下拼音過程keydown值為229（即使選中），能監聽keyup（回車也能監聽到）。

另外當拼音模式出現云檢測的智能聯想詞匯時，會額外觸發一次oninput事件。而且我們還要顧及用戶使用拼音模式打英文的情況（比如拼音模式下輸入apple并選中它）。

在折騰了半天后使用了如下方案：

在oninput/onpropertychange事件中，若keydown值非229，則直接進入請求預備。若keydown值為229，則延時判斷是否有觸發keyup，若沒有觸發keyup表示為chrome下按下回車取詞，故進入請求預備；若觸發了keyup則判斷其keyCode是否有效鍵值（如按下了數字、shift鍵等，其中對逗號鍵還要額外處理），若為有效鍵值才進入請求預備。其它情況均視為拼音模式下的打字過程，做忽略處理。

希望該插件能對你有所幫助，共勉~

donate