前言：

　　jQuery，无需多作介绍，相信各位读者都应该接触或使用过了。jQuery UI，简而言之，它是一个基于jQuery的前端UI框架。我们可以使用jQuery + jQuery UI非常简单方便地制作出界面美观、功能强大、跨浏览器兼容的前端html界面。

　　今天，我们就来介绍jQuery UI中一个功能非常强大的部件Autocomplete。

　　Autocomplete，是一个功能强大的自动完成输入的jQuery插件，它也是jQuery UI的一部分。相信用过百度或者Google搜索的读者一定不会陌生，当我们在搜索框中开始输入搜索的关键字时，搜索引擎就会智能地帮我们联想并匹配我们所需的搜索关键字内容。

现在，我们使用jQuery UI的Autocomplete部件就可以非常简单方便地实现如上述图片中Google搜索框所具备的自动完成功能。

jQuery UI 的当前最新版本为1.10.4。由于不同版本之间的用法也有所差异，其他网站关于之前版本的Autocomplete用法介绍并不能完全适用于最新版本。因此，我们有必要了解一下jQuery UI Autocomplete的最新用法。

在使用Autocomplete实现自动完成功能之前，我们先来完成一些准备工作。比如，先编写包含如下代码的html文件：

  1.     <!DOCTYPE html>
  2.     <html lang="zh">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>jQuery Autocomplete入门示例</title>
  6.     </head>
  7.     <body>
  8.  
  9.     <label for="language">请输入指定的语言：</lable>
  10.     <input id="language" name="language" type="text">
  11.  
  12.     </body>
  13.     </html>

对应的运行效果如下：

input.png

在完成上述准备工作之后，我们需要在html代码中引入jQuery UI的js文件和css文件，由于jQuery UI是依赖于jQuery的，因此我们还需要在引入jQuery UI之前引入jQuery。

  1.     <!DOCTYPE html>
  2.     <html lang="zh">
  3.     <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery Autocomplete入门示例</title>
  6.     <!-- 引入jQuery UI的css文件 -->
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />
  8.     <!-- 引入jQuery的js文件 -->
  9.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
  10.     <!-- 引入jQuery UI的js文件 -->
  11.     <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>
  12.     </head>
  13.     <body>
  14.  
  15.     <label for="language">请输入指定的语言：</lable>
  16.     <input id="language" name="language" type="text">
  17.  
  18.     </body>
  19.     </html>

现在，我们就来编写js代码让language输入框实现自动完成功能。要实现自动完成功能，我们需要如下调用jQuery UI扩展的autocomplete()方法：

  1. $("#language").autocomplete(optionsObj);

这里的optionsObj是一个用于配置autocomplete相关参数选项的JavaScript对象。我们可以参考Autocomplete官方文档的相关说明来设置该对象。

Autocomplete有一个非常重要的属性参数source，它表示用于自动完成功能的数据集合。source属性的值可以是一个数组；也可以是一个字符串，用于表示一个远程请求的URL地址，通过处理该URL返回的数据从而获得autocomplete所需的数据；它还可以是一个回调函数，以便于完成一些复杂的数据处理。

现在，我们就使用最简单的方式，给source属性指定一个静态的数组，来初步实现自动完成功能。

  1.  
  1.     $("#language").autocomplete({
  2.         source: [
  3.             "Chinese",
  4.             "English",
  5.             "Spanish",
  6.             "Russian",
  7.             "French",
  8.             "Japanese",
  9.             "Korean",
  10.             "German"
  11.         ]
  12.     });
  1.  

此时，使用浏览器访问该html页面就会发现，我们已经完成的最基本的自动完成功能了。

不过，有些时候我们希望列表显示的文本和实际输入的值并不一致。此时，我们为source指定多个对象的数组，每个对象必须包含label和value属性，label表示显示的文本，value表示实际输入的值(当然它也可以包括其他属性，你可以自行进行相关操作)。

  1. $("#language").autocomplete({
  2.     // 静态的数据源，根据label属性进行显示或模糊匹配，当给输入框设置value属性值
  3.     source: [
  4.         { label: "Chinese", value: 1 },
  5.         { label: "English", value: 2 },
  6.         { label: "Spanish", value: 3 },
  7.         { label: "Russian", value: 4 },
  8.         { label: "French", value: 5 },
  9.         { label: "Japanese", value: 6 },
  10.     ]
  11. });
  12.  
  13. // 最上面由多个字符串组成的数组，会被视为label和value值相同、均为该字符串的对象

更多的时候，我们希望该输入框显示的还是label属性值，但还要给另外的元素(例如隐藏文本域)设置value属性值，或者做一些其他处理。我们可以使用select事件来协助处理。

  1. $("#language").autocomplete({
  2.     // 静态的数据源
  3.     source: [
  4.         { label: "Chinese", value: 1, sayHi: "你好" },
  5.         { label: "English", value: 2, sayHi: "Hello" },
  6.         { label: "Spanish", value: 3, sayHi: "Hola" },
  7.         { label: "Russian", value: 4, sayHi: "Привет" },
  8.         { label: "French", value: 5, sayHi: "Bonjour" },
  9.         { label: "Japanese", value: 6, sayHi: "こんにちは" },
  10.     ],
  11.     select: function(event, ui){
  12.         // 这里的this指向当前输入框的DOM元素
  13.         // event参数是事件对象
  14.         // ui对象只有一个item属性，对应数据源中被选中的对象
  15.         $(this).value = ui.item.label;
  16.         $("#lang_id").val( ui.item.value );
  17.         $("#sayHi").html( ui.item.sayHi );
  18.  
  19.         // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值
  20.         event.preventDefault();
  21.     }
  22. });

在实际应用上，我们的数据源并不是一成不变的。大多数情况下，我们的数据都保存在数据库中，此时，我们就需要使用autocomplete通过AJAX请求获取远程数据作为数据源。

  1.     $("#language").autocomplete({
  2.         source: "public.php"
  3.     });

对应的 ajax-actions.php 的服务器页面代码如下：

  1.     <?php
  2.     header('Content-Type:text/html;charset=UTF-8');
  3.  
  4.     //为了方便举例，这里使用数组来模拟，你也可以在实际应用中从数据库中读取数据
  5.     //返回的数据最好是数组或对象类型的JSON格式字符串
  6.     $languages = array('Chinese', 'English', 'Spanish', 'Russian', 'French', 'Japanese', 'Korean', 'German');
  7.  
  8.     echo json_encode($languages);
  9.     ?>

此时，我们再次访问该页面，我们仍然可以看到自动完成的输入效果。

从远程服务器获取数据的自动完成功能

注意：细心的读者可能已经注意到了，不管是从js数组中获取数据，还是从后台服务器获取数据，我们的数据并没有发生变化；但是，我们在从后台获取数据的页面输入"c"时，显示了所有的数据项，而不是如之前一样只显示筛选过滤之后的"Chinese"和"French"。这是因为，当我们从远程请求获取数据时，Autocomplete认为服务器已经进行了过滤处理，返回的数据都是直接可用的，无需再过滤。

在发送AJAX请求时，Autocomplete会把当前输入框中的文字以默认参数名term的形式追加到我们设置的URL地址后面。当我们输入一个c时，Autocomplete实际发送的请求路径为/ajax-actions.php?term=c。

在上面的实例中，由于我们使用的是php数组来模拟服务器返回的数据，没有根据用户的输入来返回对应的数据，才会导致上述结果。如果在实际应用中，使用类似如下SQL语句来查询数据，则不会存在该问题。

  1. <?php
  2. // 注意：对于用户输入一般需要进行额外的安全处理
  3. $term = $_GET['term'];
  4. $sql = "select column1 as label, column2 as value, ... from table1 where column1 like '$term%'";
  5. $languages = query($sql);
  6. echo json_encode($languages);
  7. ?>

此外，有些时候我们需要根据用户的输入或其他操作来构造不同的请求URL，我们可以为source指定函数。Autocomplete将用户输入交给该函数，该函数可以进行任何处理，然后把通过任何方式获得的数据交给Autocomplete处理即可。

  1. $("#language").autocomplete({
  2.     // 通过函数来获取并处理数据源
  3.     source: function(request, response){
  4.         // request对象只有一个term属性，对应用户输入的文本
  5.         // response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
  6.  
  7.         // 自行处理并获取数据...
  8.         var dataObj = [...]; // 表示处理后的JSON数据
  9.         response(dataObj); // 最后将数据交给autocomplete去展示
  10.     }
  11. });

jQueryUI Autocomplete插件使用入门教程(最新版)---------转载的更多相关文章

  1. Java - Struts框架教程 Hibernate框架教程 Spring框架入门教程（新版） sping mvc spring boot spring cloud Mybatis

    https://www.zhihu.com/question/21142149 http://how2j.cn/k/hibernate/hibernate-tutorial/31.html?tid=6 ...

  2. gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程

    什么是插件 Gitbook 插件是扩展 GitBook 功能(电子书和网站)的最佳方式. 只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大 ...

  3. 《图说VR入门》——Unity插件DK2使用教程

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/53339254 作者:car ...

  4. C#中使用JQueryUI中Autocomplete插件

    服务器端后台代码: 1 private string GetModelNames() { 2 return @"[ 3 { 4 'value': 'jquery', 5 'label': ' ...

  5. gitbook 入门教程之从零到壹发布自己的插件

    什么是插件 Gitbook 插件是扩展 Gitbook 功能的最佳方式,如果 Gitbook 没有想要的功能或者说网络上也没有现成的解决方案时,那么只剩下自食其力这条道路,让我们一起来自力更生开发插件 ...

  6. Elasticsearch入门教程(一)：Elasticsearch及插件安装

    原文:Elasticsearch入门教程(一):Elasticsearch及插件安装 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...

  7. gulp的使用以及Gulp新手入门教程

    Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...

  8. C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式

    C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...

  9. powershell入门教程-v0.3版

    powershell入门教程-v0.3版 来源 https://www.itsvse.com/thread-3650-1-1.html 参考 http://www.cnblogs.com/piapia ...

随机推荐

  1. JAVA基础2——类初始化相关执行顺序

    类初始化相关执行顺序 几个概念说明 代码块的含义与作用 static静态代码块: 一般用于初始化类中的静态变量.比如:给静态的数组或者list变量赋初值.使用static静态代码块进行初始化与直接在定 ...

  2. RHCE之配置autofs远程挂载远程服务器的家目录

    [root@server0 ~]# yum -y install autofs              安装包 [root@server0 ~]# vim /etc/auto.master      ...

  3. 深入理解javascript函数进阶系列第二篇——函数柯里化

    前面的话 函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名.本文将详细 ...

  4. ConcurrentHashMap原理分析（1.7与1.8）

    前言 以前写过介绍HashMap的文章,文中提到过HashMap在put的时候,插入的元素超过了容量(由负载因子决定)的范围就会触发扩容操作,就是rehash,这个会重新将原数组的内容重新hash到新 ...

  5. C# DateDateTimePicker设置属性ShowCheckBox为True

    DateDateTimePicker的属性ShowCheckBox为True后,可以使用时间控件的复选框. 但是如果,你想设置CheckBox的选中状态为False的话,那么请注意赋时间值和赋状态值的 ...

  6. Session与Cookie的概念原理

    前言: 本文没有任何代码,内容全部都是概念与运行原理,在使用一个技术前一定要弄清他的本质,下面会讲Session.Cookie.ServletContext的概念与他们的联系区别 Session概念 ...

  7. JAVA-----基于POI实现对Excel导入

    在日常项目开发中, 数据录入和导出是十分普遍的需求,因此,导入导出也成为了开发中一个经典的功能.数据导出的格式一般是excel或者pdf,而批量导入的信息一般是借助excel来减轻工作量,提高效率. ...

  8. 授权远程连接MySQL（Linux）

    MySQL远程訪问的命令 格式: mysql -h主机地址 -uusername -p用户password 首先在目标服务器上(115.159.66.51)改动mysql的my.cnf文件: 改动退出 ...

  9. Spark Shuffle模块——Suffle Read过程分析

    在阅读本文之前.请先阅读Spark Sort Based Shuffle内存分析 Spark Shuffle Read调用栈例如以下: 1. org.apache.spark.rdd.Shuffled ...

  10. 两小时搞定C#版超级战舰游戏

    课程简单介绍 游戏开发已然是眼下火星上都非常火的开发技术.而休闲的小游戏超级战舰也是眼下白领中最流行的小游戏.那超级战舰游戏是如何在两个小时高速搞定的呢?休闲类的小游戏高速开发的指南是什么?C#是如何 ...