开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.2 技巧:使用自动补全微件提示输入值

简介: 在一些网站上,你可以找到用于选择的下拉菜单,它们包含了极长的选项列表。在许多情况下,可以使用具有自动补全功能的输入框取代下拉式菜单来帮助用户。省去了滚动选择,用户只要输入目标选项的第一个字符,然后自动补全组件便可以完成剩下的事。
+关注继续查看

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章,第7.2节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

7.2 技巧:使用自动补全微件提示输入值

在一些网站上,你可以找到用于选择的下拉菜单,它们包含了极长的选项列表。在许多情况下,可以使用具有自动补全功能的输入框取代下拉式菜单来帮助用户。省去了滚动选择,用户只要输入目标选项的第一个字符,然后自动补全组件便可以完成剩下的事。

代码清单7-2提供了一个自动补全的例子,它使用一段称为“Lorem Ipsum”的文字来实现输入第一个字后的补全。这段文字起源于两千年前,但仍然使用在图形设计和排版行业(通常被称为“假文”或“填充”的文字),用来查看设计的效果。

代码清单7-2 提示Lorem Ipsum值

00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04  <title>jQuery UI Draggable</title>
05  <link type="text/css" rel="stylesheet" href=
06   "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css"> 
07  <style>
08   .ui-widget {
09      font-size: 12px;
10   }
11  </style>
12 </head>
13 <body>
14
15 <div id="my-container">
16  <label for="my-autocomplete">Type to see how this works</label>
17  <input type="text" id="my-autocomplete">
18 </div>
19
20 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
21 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js">
22 </script>
23
24 <script>
25 // 请将下列代码移至一个外部的.js文件中
26 $(document).ready(function() {
27  
28  var loremIpsum = [
29  'Lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur',
30   'adipiscing', 'elit', 'Donec', 'fermentum', 'tortor', 'et',
31   'ante', 'ullamcorper', 'eget', 'posuere', 'ligula' 
32  ];
33
34  $('#my-autocomplete').autocomplete({source: loremIpsum});
35  
36 });
37 </script>
38 </body>
39 </html>

当运行这个例子时,要注意自动补全框中的提示是根据它们在第29~31行的出现顺序排序的。autocomplete()函数在第34行被调用,它使用了source的选项,其值loremIpsum为第28行创建的数组。如果需要一个不同的排列顺序,按字母顺序或按热门程度,需要在“喂”给自动补全框数据前,自己先排好序。

7.2.1 为自动补全元素添加样式
在调用autocomplete命令后,输入框的HTML会变为这样:

<input type="text" id="my-autocomplete" class="ui-autocomplete-input"
 autocomplete="off" role="textbox" aria-autocomplete="list"
 aria-haspopup="true">
当开始在自动补全框中输入时,一组临时的HTML元素被添加到文档底部以生成选项列表。

<ul
 class="ui-autocomplete ui-menu ui-widget ui-widget-content
   ui-corner-all"
 role="listbox" aria-activedescendant="ui-active-menuitem"
 style="z-index: 1; width: 149px; top: 32px; left: 181px;
 display: none;">
 <li class="ui-menu-item" role="menuitem">
  <a class="ui-corner-all" tabindex="-1">Lorem</a>
 </li>
 <li class="ui-menu-item" role="menuitem">
  <a class="ui-corner-all" tabindex="-1">dolor</a>
 </li>
 . . . 等等 . . .
</ul>

可以使用这些HTML代码片段中的类名去手动修改自动补全组件的样式。

7.2.2 设置自动补全的选项
表7-3列出的选项可以设置自动补全微件。
screenshot
screenshot

7.2.3 捕获自动补全的事件
当使用自动补全时,有很多阶段可以发生事件处理。下面的代码片段举例演示了哪个阶段可以绑定它。

一个新的自动补全组件被初始化时:

$('#my-autocomplete').autocomplete({create: function(event, ui) {
   // 事件处理
}});
//或
$('#my-autocomplete')
  .on('autocompletecreate', function(event, ui) {
   // 事件处理
  })
  .autocomplete();

用户输入的搜索值达到minLength设置的长度时。返回false将取消搜索:

$('#my-autocomplete').autocomplete({search: function(event, ui) {
   // 事件处理
}});
//或
$('#my-autocomplete').autocomplete()
 .on('autocompletesearch', function(event, ui) {
   // 事件处理
 });

选项菜单打开时:

$('#my-autocomplete').autocomplete({open: function(event, ui) {
   // 事件处理
}});
//或
$('#my-autocomplete').autocomplete()
 .on('autocompleteopen', function(event, ui) {
   // 事件处理
 });

下拉菜单中的一个元素获得焦点时。返回false将阻止输入框的更新:

$('#my-autocomplete').autocomplete({focus: function(event, ui) {
   // 事件处理
}});
//或
$('#my-autocomplete').autocomplete()
 .on('autocompletefocus', function(event, ui) {
   // 事件处理
 });

一个选项被选择时:

$('#my-autocomplete').autocomplete({select: function(event, 
ui) {
   // 事件处理
}});
//或
$('#my-autocomplete').autocomplete()
 .on('autocompleteselect', function(event, ui) {
   // 事件处理
 });

自动补全关闭时:

$('#my-autocomplete').autocomplete({close: function(event, ui) {
   // 事件处理
}});
//或
$('#my-autocomplete').autocomplete()
 .on('autocompleteclose', function(event, ui) {
   // 事件处理
 });

当用户移动到屏幕上的下一个元素,如果输入框的值也发生了变化,该事件被触发:

$('#my-autocomplete').autocomplete({change: function(event, ui) {
   // 事件处理
}});
//或
$('#my-autocomplete').autocomplete()
 .on('autocompletechange', function(event, ui) {
   // 事件处理
 });

7.2.4 调用自动补全的方法
下面的代码片段演示了使用自动补全的方法的例子。

绑定click事件,设置选项minLength:0,点击输入框后,不输入任何值而使用当前值则会显示所有搜索的结果1:

$('#my-autocomplete')
 .autocomplete({minLength: 0, source: loremIpsum})
 .click(function() {
   $(this).autocomplete('search');
 });

关闭当前提示列表:

$('#my-autocomplete').autocomplete('close');

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery插件制作 -- 6.手风琴Panel
  我们今天要做的是手风琴panel,jquery.ui里面有个叫做accordtion的插件,我们要实现的效果和他一样。   首先我们还是创建一个html文件,里面包含如下的html结构。        first pane     this script should allow only one pane to be visible at a time.
980 0
35 个高级但使用简单的 jQuery 插件
Subway Map Visualization jQuery Plugin Download | Demo jquery-toastmessage-plugin Download | Demo Gmap Google Maps Plugin for jQuery Download | Demo Recurly.
896 0
10 新鲜的 jQuery 插件(2012年1月)
1. jQuery UI Bootstrap 一个基于 Twitter  Bootstrap 的 jQuery UI 主题 2. jqGrid 这是非常棒的jQuery 表格插件,在线演示:here.
940 0
Jquery图片滚动插件—BxCarousel
Jquery图片滚动插件—BxCarousel BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: Ø  可以指定显示的元素数 Ø  可以指定每次滚动元素数 Ø  自动播放模式 Ø  前一张/后一张按钮控制图片流动   下面我看两个BxCarousel...
761 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
OPEN SOURCE IN A DATA-DRIVEN WORLD
立即下载
yqdh_58c13122dd2...1510468684.pdf
立即下载
ST+AliOS > Smart IoT !
立即下载