jQuery UI，简而言之，它是一个基于jQuery的前端UI框架。我们可以使用jQuery + jQuery UI非常简单方便地制作出界面美观、功能强大、跨浏览器兼容的前端html界面。

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

　　一、首先了解下JQueryUI提供的重要属性

　　1. autoFocus：当智能提示框出现时，是否自动选中第一项，默认为false，即不选中。　　

　　2. delay：在按键后执行搜索的延时，默认为300ms。

　　3. disabled：是否禁用自动完成功能，默认为false。

　　4. minLength：触发自动完成功能需要输入的最小字符数量。

　　5. source：即为指定智能提示下拉框中的数据来源，支持三种类型。

　　　　① Array，主要用于本地化数据提供，支持两种格式：字符串数组 [ "Choice1", "Choice2" ]及标签和值属性的Json格式数组 [ { label: "Choice1", value: "value1" }, ... ]

　　　　② String，用于ajax请求的远程地址链接，返回Array或Json格式字符串。

　　　　③ Function，回调函数，最具有灵活性的一种方式，可用于返回任何数据源方式来实现自动完成，其中包含两个参数request，response通过request.term来获取用户输入的值,通过response(argument)来对获取的数据源进行显示。

　　二、JQuery UI还提供了一些有用的方法

　　1. close()：关闭智能提示选择框。

　　2. destroy()：销毁智能提示选择框，将其所产生的元素完全删除，使其恢复至初始状态。

　　3. disable()：禁用自动完成功能。

　　4. enable()：开启自动完成功能。

　　三、主要事件包括

　　1. change(event, ui)：当值改变时发生，ui.item为选中的项。

　　2. close(event, ui)：当智能提示框关闭时发生。

　　3. create(event, ui)：当智能提示框创建时发生，可以在此事件中，对外观进行一些控制。

　　4. focus(event, ui)：当智能提示列表任意一项获得焦点时发生，ui.item为获得焦点的项。

　　5. open(event, ui)：当智能提示框打开或更新时发生。

　　6. response(event,ui)：在搜索完成后智能提示框显示前发生，可以在此事件中对显示项进行处理

　　7. search(event, ui)：在开始请求之前发生，可以在此事件中返回false来取消请求。

　　8. select(event, ui)： 当智能提示框中任意一项被选中时发生，ui.item为选中的项。

　　示例一（基于本地数据，来源于官方demo）

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <title>jQuery UI Autocomplete - 本地数据</title>

     <link rel="stylesheet" href="jquery-ui.min.css">

     <script src="jquery-1.9.0.min.js" type="text/javascript"></script>

     <script src="jquery-ui.min.js" type="text/javascript"></script>

     <style>

     .ui-autocomplete {

         max-height: 100px;

         overflow-y: auto;

         /* prevent horizontal scrollbar */

         overflow-x: hidden;

     }

     /* IE 6 doesn't support max-height

      * we use height instead, but this forces the menu to always be this tall

      */

     * html .ui-autocomplete {

         height: 100px;

     }

     </style>

 </head>

 <body>

 <div class="ui-widget">

     <label for="tags">请输入: </label>

     <input id="tags">

 </div>

 </body>

 <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" ).focus(function(){

             $( "#tags" ).autocomplete({

                 source: availableTags

             });

         });

     });

     </script>

 </html>

效果图如下：

　　示例二（基于远程数据，来源于官方demo）

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <title>jQuery UI Autocomplete - 远程数据</title>

     <link rel="stylesheet" href="jquery-ui.min.css">

     <script src="jquery-1.9.0.min.js" type="text/javascript"></script>

     <script src="jquery-ui.min.js" type="text/javascript"></script>

     <style>

     .ui-autocomplete-loading {

         background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;

     }

     </style>

     <script>

     $(function() {

         function log( message ) {

             $( "<div>" ).text( message ).prependTo( "#log" );

             $( "#log" ).scrollTop( 0 );

         }

         $( "#birds" ).autocomplete({

             source: "search.php",

             minLength: 2,

             select: function( event, ui ) {

                 log( ui.item ?

                     "Selected: " + ui.item.value + " aka " + ui.item.id :

                     "Nothing selected, input was " + this.value );

             }

         });

     });

     </script>

 </head>

 <body>

 <div class="ui-widget">

     <label for="birds">请输入: </label>

     <input id="birds">

 </div>

 <div class="ui-widget" style="margin-top:2em; font-family:Arial">

     结果:

     <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>

 </div>

 </body>

 </html>

对应的后台查询的php代码如下：

 <?php

 sleep( 3 );

 // no term passed - just exit early with no response

 if (empty($_GET['term'])) exit ;

 $q = strtolower($_GET["term"]);

 // remove slashes if they were magically added

 if (get_magic_quotes_gpc()) $q = stripslashes($q);

 $items = array(

 "Great Bittern"=>"Botaurus stellaris",

 "Little Grebe"=>"Tachybaptus ruficollis",

 "Black-necked Grebe"=>"Podiceps nigricollis",

 "Little Bittern"=>"Ixobrychus minutus",

 "Black-crowned Night Heron"=>"Nycticorax nycticorax",

 );

 $result = array();

 foreach ($items as $key=>$value) {

     if (strpos(strtolower($key), $q) !== false) {

         array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($key)));

     }

     if (count($result) > 11)

         break;

 }

 // json_encode is available in PHP 5.2 and above, or you can install a PECL module in earlier versions

 echo json_encode($result);

 ?>

　　注意：当我们从后台获取数据时，如果没有其他额外的过滤操作，Autocomplete会将过滤的操作交给服务器后台来完成。在发送ajax请求时，Autocomplete会把当前输入框中的文字以默认参数名term的形式追加到我们设置的URL地址后面。当我们输入一个c时，Autocomplete实际发送的请求路径为/ajax-actions.php?term=c。因此，Autocomplete认为服务器返回的数据就是过滤后需要显示的数据。

参考资料：

http://www.365mini.com/page/jquery-ui-autocomplete.htm

http://www.cnblogs.com/psforever/archive/2013/03/02/2940124.htm

http://blog.csdn.net/sadfishsc/article/details/7572054

http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html

【jQuery】jquery-ui autocomplete智能提示的更多相关文章

  1. Eclipse添加Jquery和javascript的智能提示

    使用Eclipse写Jquery和Javascript代码的时候,是没有智能提示的.我们可以使用一个插件来解决这个问题. 安装完成后,Eclipse会自动重启.重启之后,我们在项目上右键,   根据自 ...

  2. jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  3. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  4. jQuery UI Autocomplete是jQuery UI的自动完成组件（share）

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  5. Eclipse安装插件支持jQuery智能提示

    Eclipse安装插件支持jQuery智能提示 最近工作中用到jQuery插件,需要安装eclipse插件才能支持jQuery智能提示,在网上搜索了一下,常用的有三个插件支持jQuery的智能提示:1 ...

  6. jquery的智能提示控件

    福利到~分享一个基于jquery的智能提示控件intellSeach.js   一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...

  7. 一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  8. jQuery UI Autocomplete是jQuery UI的自动完成组件

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

  9. jQuery打造智能提示插件二（可编辑下拉框）

    在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...

随机推荐

  1. C语言：结构体和联合体(共用体)

    结构体:struct 1.结构体变量的首地址能够被其最宽基本类型成员的大小所整除. 2.结构体每个成员相对于结构体首地址的偏移量(offset)都是成员的整数倍. 3.结构体的总大小为结构体最宽基本类 ...

  2. iOS:UIImageView图像视图控件

    UIImageView:图像视图控件:    它是UIView的子类,因此也是视图控件,可以用来显示图像.因为它具有帧动画属性和操作方法,因此可以用来制作动画,其实动画就是很短的时间内,执行显示连续的 ...

  3. eclipse svn 配置

    1.安装svn http://subversion.apache.org/ 到apache网站上下载svn 2.在eclipse中安装svn插件 在eclipse->help->eclip ...

  4. CoreAudio实现录音播音和扬声器听筒模式的切换

    本例子使用Core Audio实现类似于微信的音频对讲功能,可以录音和播放并且实现了听筒模式和扬声器模式的切换.录音主要使用AVAudioRecorder类来实现录音功能,播放则使用AVAudioPl ...

  5. [14] 齿轮(Gear Wheel)图形的生成算法

    顶点数据的生成 bool YfBuildGearwheelVertices ( Yreal radius, Yreal assistRadius, Yreal height, Yuint slices ...

  6. [转]室友靠打游戏拿30万offer，秘密竟然是……

    又是一年秋招季,苦逼的小编还天天泡在图书馆里刷PAT,室友大佬却已经到处拿offer.上周某室友已经成功拿到杭州某企业年薪30W的offer,小编虚心向其讨教,某室友一脸兴奋地告诉小编,HR让面试者们 ...

  7. jQuery用面向对象的思想来编写验证表单的插件

    本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...

  8. 10个步骤让你成为高效的Web开发者

    要成为高产.高效的Web开发者,这需要我们做很多工作,来提高我们的工作方式,以及改善我们的劳动成果. 下面是10个提高效率的步骤,虽然不能保证解决你在开发中的所有问题,但至少是非常实用的,可以简化你的 ...

  9. Java基础（十）：封装

    在面向对象程式设计方法中,封装(英语:Encapsulation)是指一种将抽象性函式接口的实现细节部份包装.隐藏起来的方法.封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定义的代码随机访 ...

  10. Java基础（二）：基本数据类型和变量类型

    一.java基本数据类型: 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间.内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. Java 的两 ...