jQuery实现用户输入自动完成功能

时间：2024-01-15 21:44:08

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

    });

      }

    });

  });

相关文章