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

    });

      }

    });

  });

jQuery实现用户输入自动完成功能的更多相关文章

  1. jquery 实现邮箱输入自动提示功能：（二）

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  2. jquery 实现邮箱输入自动提示功能：（一）

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  3. jquery 实现邮箱输入自动提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

  4. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. 【原】ComboBoxety用户输入自动匹配

    //在界面构造函数里加入下面两行代码 this.cbbDepartureAirport.AutoCompleteMode = System.Windows.Forms.AutoCompleteMode ...

  6. EditText(3)输入时自动完成功能

    在android输入自动完成功能由EditText的子类 AutoCompleteTextView 实现.如下: 1,在xml中使用 <AutoCompleteTextView android: ...

  7. jquery+php实现用户输入搜索内容时自动提示

    index.html <html> <head>     <meta charset=;} #search_auto li a:hover{background:#D8D ...

  8. PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能

    XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...

  9. JQuery输入自动完成

    Combogrid 是一个jQuery插件用于为输入框添加高级自完成功能(auto-complete).当用户输入的时候,会在输入框的下方面动态显示一个拥有分页功能 的表格(Grid)控件. 通过Aj ...

随机推荐

  1. 201521123033《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. answer: 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号 ...

  2. 多线程：多线程设计模式（三）：Master-Worker模式

    Master-Worker模式是常用的并行模式之一,它的核心思想是,系统有两个进程协作工作:Master进程,负责接收和分配任务:Worker进程,负责处理子任务.当Worker进程将子任务处理完成后 ...

  3. 06jQuery-03-选择器查找和过滤

    1.查找 find().parent().prev().next() 通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤. 最 ...

  4. mongoDB rs和sh关键字的作用

    rs是一个全局变量,其其中定义了很多分片操作的辅助函数, 可以sh.help()查看使用的辅助函数 这些是rs和sh所有函数 在mongoDB中有两种方法表示 例 sh.enableSharding( ...

  5. mongodb 在windows下面进行副本建创建

    一:主从复制 1: 首先看看模型图 2: 从上面的图形中我们可以分析出这种架构有如下的好处: <1>  数据备份. <2>  数据恢复. <3>  读写分离. 3: ...

  6. Ansible系列(六)：各种变量定义方式和变量引用

    本文目录:1.1 ansible facts1.2 变量引用json数据的方式 1.2.1 引用json字典数据的方式 1.2.2 引用json数组数据的方式 1.2.3 引用facts数据1.3 设 ...

  7. 逆向实战干货,快速定位自动捡阳光Call,或者标志

    逆向实战干货,快速定位自动捡阳光Call,或者标志 注意: 关于CE和OD的使用,这里不再多说,快速定位,默认大家已经有了CE基础,或者OD基础. 第一种方法,找Call 第一步,打开CE,搜索阳光值 ...

  8. 树莓派3 B+ 的摄像头简单使用（video-streamer）

    一.首先在某东上购买树莓派摄像头 我的买的硬件张这个样子的(CSI接口摄像头): 正视图                                                         ...

  9. openGPS.cn - 高精度IP定位原理，定位误差说明

    [ip定位历史] 关于IP定位,最早是通过运营商实现,每个运营商申请到的ip段,在某个范围内使用. 因此早期只能是国家为单位的基础数据. 对于比较大的国家,就进一步划分,比如,中国某通讯公司(不打广告 ...

  10. latex使用笔记

    1.图片自动浮动到最后一页单独占用一页 将表格中的 \begin{table}[h]\end{table} 改成 \begin{table}[H]\end{table} 即可 2.公式内容中字母之间空 ...