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);
    });
      }
    });
  });


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM