jQuery實現使用者輸入自動完成功能

sumer7310發表於2017-02-13
jQuery

jQuery實現使用者輸入自動完成功能

利用jQuery UI中Auto-complete外掛實現輸入自動完成功能，大家在使用諸如淘寶、京東等電商平臺搜尋商品時，往往只要輸入商品的一些特殊字元，就可以顯示出和該字元相近的列表選單，使用者使用滑鼠或者鍵盤方向鍵就可以快速選擇，實現了很好的使用者體驗。

1.最簡單的使用者輸入自動完成

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    //定義並初始化字典庫資料來源集合
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    //自動完成外掛函式
    $( "#tags" ).autocomplete({
      //自動完成字典庫資料來源
      source: availableTags
    });
      });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">請輸入: </label>
  <input id="tags">
</div>
</body>
</html>

2 使用遠端資料來源自動完成

Auto-complete外掛不光可以實現本地資料來源的自動完成，也可以讀取遠端的資料來源，列如實現從伺服器端讀取資料來源資訊。
通過將伺服器資料快取到瀏覽器中，獲取的資料來源首先儲存在cache變數中。

  $(function() {
    //自定義快取變數
    var cache = {};
    //自動完成外掛函式
    $("#tags").autocomplete({
      //定義使用者最少輸入的字元數
      minLenght: 2,
      source: function(request, response){//定義遠端獲取資料來源函式
    var term = request.term;//定義使用者請求資訊變數
    if(term in cache) {//判斷請求資料是否存在快取中
      response(cache[term]);//真，從快取中讀取資料
      return;
    }
    $.getJSON('data.json', request, function(data, Status, xhr) {
      cache[term] = data.result;//快取遠端資料
      response(data.result);
    });
      }
    });
  });

相關文章