<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<style type="text/css">
.ui-autocomplete-category {
 font-weight: bold;
 padding: .2em .4em;
 margin: .8em 0 .2em;
 line-height: 1.5;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
 //扩展autocomplete组件，重写autocomplete的_renderMenu方法，将提示条目分类别显示
 //$.widget接受三个参数，第一个参数是新的组件的名称，必须以custom.开头，.后面的才是新组件的名称，调用或者初始化方式与autocomplete相同
 //第二个参数是扩展或者重写的组件，这里是$.ui.autocomplete，自动完成组件
 //第三个参数是对象，包含了重写的属性或者方法，这里重写了_renderMenu方法
 $.widget("custom.catcomplete", $.ui.autocomplete, {
  //该方法在渲染下拉列表之前被调用，可以通过修改此方法达到将选项分类的目的
  //传入的ul参数是选项的父容器，可以将选项增加到容器中
  //传入的items参数是即将显示的数据列表
  _renderMenu : function(ul, items) {
   var that = this;
   currentCategory = "";
   //遍历items对象数组，将他们分类，下面的这种方法必须保证同类别的数据放在一起才可以。
   $.each(items, function(index, item) {
    if (item.category != currentCategory) {
     ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
     currentCategory = item.category;
    }
    that._renderItemData(ul, item);
   });
  }
 });
 //扩展combobox组件，使其可以支持自动完成功能,重要！！！
 $.widget("custom.combobox", {
  //本人猜测这个方法应该是创建该组件时调用的，实践证明也是的，即$("#combobox").combobox();这句话
  _create : function() {
   console.log("call _create");
   this.wrapper = "";
  }
 });
</script>
<script type="text/javascript">
 $(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" ];
  var objects = [ {
   label : "America",
   value : "美国"
  }, {
   label : "China",
   value : "中国"
  }, {
   label : "Japan",
   value : "日本"
  } ];
  var categories = [ {
   label : "anders",
   category : ""
  }, {
   label : "andreas",
   category : ""
  }, {
   label : "antal",
   category : ""
  }, {
   label : "annhhx10",
   category : "Products"
  }, {
   label : "annk K12",
   category : "Products"
  }, {
   label : "annttop C13",
   category : "Products"
  }, {
   label : "anders andersson",
   category : "People"
  }, {
   label : "andreas andersson",
   category : "People"
  }, {
   label : "andreas johnson",
   category : "People"
  } ];
  var autocomplete = $("#tags").autocomplete({
   //设置自动完成输入框的数据源，可以是字符串数组，可以使对象数组，也可以是url字符串(返回一个json数据)
   //如果是对象数组，每个对象可以有两个属性，label和value，label代表显示的值，value代表选中后填入输入框的值，数据过滤是过滤label的
   //source : availableTags,//为什么设置成url后就不能根据用户输入过滤数据了呢，而且文件中是对象数组无法自动提示啊
   //自动提示框会根据用户输入的字符自动筛选符合条件的字符串，默认筛选规则是整个字符串内容包含用户输入的字符即符合条件，可以修改这个默认行为
   //source如果设置成function函数，函数有两个参数，第一个参数可以获取用户输入的字符，第二个参数是一个函数，调用这个函数并且传入一个数组即可，数组即前面所说的数组，但是不能是url了，因为调用response函数已经不会帮我们再次去请求了
   source : function(request, response) {
    console.log($.ui.autocomplete.escapeRegex(request.term));
    //创建一个正则表达式，$.ui.autocomplete.escapeRegex方法说是可以将字符串中的特殊字符作为普通字符处理，即如果传入的是"[]"，处理后返回"\[\]"，其实就是加了转义字符而已
    //第二个参数"i"表示该正则表达式忽略大小写比较
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
    //$.grep方法可以看做是一个过滤数组元素的方法，将数组中不符合条件的元素剔除
    //第一个参数是源数组，第二个参数是一个回调函数，参数是数组的每一项，如果方法返回true，该元素会被加到目的数组中，否则被过滤
    response($.grep(availableTags, function(item) {
     return matcher.test(item);
    }));
   },
   //这个配置项不知道是干嘛的。。。
   appendTo : "body",
   //可以设置成true或者false
   //如果设置成true，当下拉列表显示时，自动聚焦到列表第一项
   //如果设置成false，当下拉列表显示时，将不会自动聚焦，默认为false
   autoFocus : true,
   //设置下拉列表显示的延迟时间，单位毫秒，默认值是300
   delay : 100,
   //设置自动完成框的禁用状态，true表示禁用，false表示启用
   disabled : false,
   //设置搜索的最小字符数，即输入至少minLength个字符，才会去匹配提示，
   //数据比较少的情况下可以设置成0，但是如果数据太多，有几千条，就需要用这个限制来过滤数据了
   minLength : 1,
   //设置下拉列表相对于自动完成输入框的位置
   position : {
    //设定下拉列表的定位点，即at属性会以这个点为参照物，设定下拉列表相对于输入框的位置
    //第一个值是水平方向，可选left,right,center
    //第二个值是竖直方向，可选left,right,center
    my : "left top",
    //设定相对位置
    at : "left bottom"
   },
   //扩展点，不知道干嘛的，没看见被调用，应该不是这么使用
   _renderItem : function(ul, item) {
    alert("_renderItem");
    return $("<li>").attr("data-value", item.value).append($("<a>").text(item.label)).appendTo(ul);
   },
   //扩展点，不知道干嘛的，没看见被调用，应该不是这么使用
   _renderMenu : function(ul, items) {
    var that = this;
    $.each(items, function(index, item) {
     that._renderItemData(ul, item);
    });
    $(ul).find("li:odd").addClass("odd");
   },
   //扩展点，不知道干嘛的，没看见被调用，应该不是这么使用
   _resizeMenu : function() {
    this.menu.element.outerWidth(500);
   },
   //当文本框内容修改后失去焦点时触发该事件，也可以使用绑定的方式将该事件绑定到提示框上
   //autocomplete.on("autocompletechange",function(event,ui){}); 
   //ui.item代表你选中的那一项的对象，包含label和value属性，如果没选中ui.item为null
   change : function(event, ui) {
    if (ui.item == null) {
     console.log("No Choose");
    } else {
     console.log("Choose" + ui.item.value);
    }
   },
   //当智能提示框关闭后会触发此事件,ui是空对象
   close : function(event, ui) {
    console.log("close");
   },
   //当自动完成组件创建时回调此方法,ui是空对象
   create : function(event, ui) {
    console.log("create");
   },
   //当提示列表中的某一项获取焦点时触发此事件,其中ui.item就是获得焦点的那一项
   //只有使用键盘选择某一项时，才会更新文本框中的值，使用鼠标不更新文本框的值，但是都会触发此事件
   focus : function(event, ui) {
    console.log("focus:" + ui.item.value);
   },
   //当提示列表打开后触发此事件,ui是空的对象
   open : function(event, ui) {
    console.log("open");
   },
   //在search事件触发之后，列表显示之前会触发此事件，其中ui.content是即将显示在列表中的内容，已经标准化过了，是包含label和value的对象数组
   response : function(event, ui) {
    console.log("content length:" + ui.content.length);
    //在每个对象的label属性中增加一个索引，使用$.each()方法遍历对象数组，第一个参数是数组，第二个参数是回调方法，每遍历一个对象会回调一次该方法，该方法第一个参数是索引，第二个参数是对象，如果该方法返回false，表示跳出遍历，如果返回true，继续下一个对象遍历。
    $.each(ui.content, function(i, obj) {
     obj.label += i;
     if (i == 5) {
      return false;
     }
    });
   },
   //在minLength满足后，delay之后会首先触发该事件，具体作用不详，传进来的ui是一个空的对象
   search : function(event, ui) {
    console.log("search");
   },
   //当列表中的某一个像被选中后触发此事件，参数和focus是一样的
   select : function(event, ui) {
    console.log("select:" + ui.item.value);
    //event.preventDefault();使用这个函数可以阻止事件的默认行为，比如选择某一项的默认行为就是更新文本框的值，如果调用该方法，则不会更新文本框的值。但是不能阻止列表关闭。
   }
  });
  $("#close").button().click(function() {
   autocomplete.autocomplete("close");//关闭智能提示框
  });
  $("#destroy").button().click(function() {
   autocomplete.autocomplete("destroy");//销毁智能提示框，输入框将不再具有提示功能
  });
  $("#disable").button().click(function() {
   autocomplete.autocomplete("disable");//禁用智能提示框，输入框将不再具有提示功能
  });
  $("#enable").button().click(function() {
   autocomplete.autocomplete("enable");//启用智能提示框，输入框将不再具有提示功能
  });
  $("#isDisabled").button().click(function() {
   var isDisabled = autocomplete.autocomplete("option", "disabled");//获取智能提示是否禁用的状态
   console.log("isDisabled:" + isDisabled);
  });
  $("#option").button().click(function() {
   var option = autocomplete.autocomplete("option");//获取智能提示框所有配置信息
   var optionStr = "";
   //遍历配置信息
   for ( var p in option) {
    optionStr += p + ":" + option[p] + "\n";
   }
   console.log("Option:\n" + optionStr);
  });
  $("#setDelay").button().click(function() {
   autocomplete.autocomplete("option", "delay", 2000);//设置下拉列表延迟时间为2s
  });
  $("#search").button().click(function() {
   //调用之后会触发search事件，可以设置回调方法，实践证明，不能触发search事件的回调方法，funk，那这个方法作用是啥啊？
   autocomplete.autocomplete("search", "");
  });
  //创建catcomplete组件
  $("#catcomplete").catcomplete({
   source : categories
  });
  //创建combobox组件
  var combobox = $("#combobox").combobox();
  //遍历一下combobox对象的属性和方法
  var optionStr = "";
  for ( var p in combobox) {
   optionStr += p + "\n";
  }
  console.log(optionStr);
 });
</script>
</head>
<body>
 <div class="ui-widget">
  <label for="tags">autocomplete: </label> <input id="tags" />
 </div>
 <!--
 <button id="close">关闭智能提示框</button>
 <button id="destroy">销毁智能提示框</button>
 <button id="disable">禁用智能提示</button>
 <button id="enable">启用智能提示</button>
 <button id="isDisabled">获取智能提示是否禁用状态</button>
 <button id="option">获取智能提示框所有配置信息</button>
 <button id="setDelay">设置列表延迟时间</button>
 <button id="search">触发search事件</button>
  -->
 <div class="ui-widget">
  <label for="catcomplete">catcomplete: </label><input id="catcomplete" />
 </div>
 <div class="ui-widget">
  <label>Your preferred programming language: </label> <select id="combobox">
   <option value="">Select one...</option>
   <option value="ActionScript">ActionScript</option>
   <option value="AppleScript">AppleScript</option>
   <option value="Asp">Asp</option>
   <option value="BASIC">BASIC</option>
   <option value="C">C</option>
   <option value="C++">C++</option>
   <option value="Clojure">Clojure</option>
   <option value="COBOL">COBOL</option>
   <option value="ColdFusion">ColdFusion</option>
   <option value="Erlang">Erlang</option>
   <option value="Fortran">Fortran</option>
   <option value="Groovy">Groovy</option>
   <option value="Haskell">Haskell</option>
   <option value="Java">Java</option>
   <option value="JavaScript">JavaScript</option>
   <option value="Lisp">Lisp</option>
   <option value="Perl">Perl</option>
   <option value="PHP">PHP</option>
   <option value="Python">Python</option>
   <option value="Ruby">Ruby</option>
   <option value="Scala">Scala</option>
   <option value="Scheme">Scheme</option>
  </select>
 </div>
 <button id="toggle">Show underlying select</button>
</body>
</html>

JqueryUI学习笔记-自动完成autocomplete的更多相关文章

  1. Spring学习笔记--自动装配Bean属性

    Spring提供了四种类型的自动装配策略: byName – 把与Bean的属性具有相同名字(或者ID)的其他Bean自动装配到Bean的对应属性中. byType – 把与Bean的属性具有相同类型 ...

  2. Spring学习笔记--自动检测

    要使用自动检测,我们需要用到<context:annotation-scan>标签.<context:annotation-scan>元素除了完成与<context:an ...

  3. Spring学习笔记:自动创建Proxy

    为什么需要自动创建Proxy 手动为所有需要代理的类用ProxyFactoryBean创建代理Proxy需要大量的配置. 这样如果需要代理的类很多,配置就很繁琐,而且也不便于xml配置的维护. 因此S ...

  4. swift学习笔记5——其它部分（自动引用计数、错误处理、泛型...）

    之前学习swift时的个人笔记,根据github:the-swift-programming-language-in-chinese学习.总结,将重要的内容提取,加以理解后整理为学习笔记,方便以后查询 ...

  5. [原创]java WEB学习笔记99：Spring学习---Spring Bean配置：自动装配，配置bean之间的关系(继承/依赖)，bean的作用域(singleton,prototype,web环境作用域)，使用外部属性文件

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. Dynamic CRM 2013学习笔记（三十四）自定义审批流5 - 自动邮件通知

    审批过程中,经常要求自动发邮件:审批中要通知下一个审批人进行审批:审批完通知申请人已审批完:被拒绝后,要通知已批准的人和申请人.下面详细介绍如何实现一个自动发邮件的插件:   1. 根据审批状态来确定 ...

  7. Android（java）学习笔记204：自定义SmartImageView（继承自ImageView，扩展功能为自动获取网络路径图片）

    1.有时候Android系统配置的UI控件,不能满足我们的需求,Android开发做到了一定程度,多少都会用到自定义控件,一方面是更加灵活,另一方面在大数据量的情况下自定义控件的效率比写布局文件更高. ...

  8. thinkphp学习笔记9—自动加载

    原文:thinkphp学习笔记9-自动加载 1.命名空间自动加载 在3.2版本中不需要手动加载类库文件,可以很方便的完成自动加载. 系统可以根据类的命名空间自动定位到类库文件,例如定义了一个类Org\ ...

  9. 面图层拓扑检查和错误自动修改—ArcGIS案例学习笔记

    面图层拓扑检查和错误自动修改-ArcGIS案例学习笔记 联系方式:谢老师,135_4855_4328,xiexiaokui#139.com 数据源: gis_ex10\ex01\parcel.shp, ...

随机推荐

  1. 使用jQuery的Scrollify插件实现鼠标滚轮或者手势滑动到页面下一节点部分

    有时我们需要做一个单页面介绍产品特性,而单页面内容非常多且页面非常长,为了快速定位到产品特性节点,我们使用js侦听用户滚轮事件,当用户触发滚轮滑动或者使用手势触屏滑动时,即可定位到相应的节点.一款jQ ...

  2. Tomcat 6 —— Realm域管理

    本篇来源于官方文档,但不仅仅是翻译,其中不乏网上搜索的资料与自己的理解. 如有错误,请予指正. 什么是Realm 首先说一下什么是Realm,可以把它理解成“域”,也可以理解成“组”,因为它类似 类U ...

  3. C#深入浅出 C#语法中的重中之重——委托（四）

    入行半年多了,委托干什么用的还不知道,真心说不过去了,关键对这东西有点恐惧,主要是被老师吓的,记得我C#专业课老师在讲到委托时,原话是这样的,同学们,委托这个地方是难点,暂时不讲,讲了你也不懂,等你有 ...

  4. HDOJ 3652 B-number

    B-number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  5. MySQL数据库的事务管理

    当前在开发ERP系统,使用到的数据库为Mysql.下面介绍下如何开启事务,以及事务隔离的机制 : 1. 检查当前数据库使用的存储引擎. show engines; 2. 修改前my.ini中的文件如下 ...

  6. eclipse安装spring插件

    1.打开eclipse点击help,点击about eclipse 2.点击最左侧图票查看eclipse版本 3.查看版本 4.进入http://spring.io/tools/sts/all,选择适 ...

  7. lvs部署-DR模式

    DR模式 角色 IP地址 备注 LVS负载均衡器 192.168.119.132 VIP:192.168.119.150    ipvsadm http_Real server 192.168.119 ...

  8. javaweb框架构想-自己的对象存储池-遁地龙卷风

    设计初衷: 网站在提供服务的过程中,会创建很多对象,bean,dao层的对象尤为频繁,然而这些对象是可以重复利用的.设计思路: 对象连接池ObjectPool才用单态的设计模式,自带线程,每隔一段时间 ...

  9. 关于phpcms中mysql和mysqli的区别

    用phpcms开发一个考试成绩查询的小模块,用电脑上以前下载的phpcms版本为框架开发,一切顺利.想着下载一个最新版本,以后也免了升级的麻烦.于是,下载好,然后把模块目录.model数据库连接文件. ...

  10. Support for Xpm library: no问题

    编译gd,出现问题 Support for Xpm library:          no 怎么解决? 解决办法就是去下载libXpm库安装: yum -y install libXpm-dev 这 ...