AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead
Typeahead指令是一个用于智能提示或自动完成的控件，就像Jquery的AutoComplete控件一样。来看一个最简单的例子：
<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<title></title> <script src="/Scripts/angular.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
<script> angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('TypeaheadCtrl', function ($scope) {
$scope.selected = undefined;
$scope.names = [
{ 'name': '张三', 'ename': 'zhangsan' },
{ 'name': '李四', 'ename': 'lisi' },
{ 'name': '王五', 'ename': 'wangwu' }
];
});
</script> </head>
<body>
<div ng-controller="TypeaheadCtrl">
<input type="text" ng-model="selected" uib-typeahead="n.name as n.name+'('+n.ename+')' for n in names | filter:$viewValue | limitTo:8" class="form-control">
</div>
</body>
</html>
在文本框中输入z，智能提示效果是：
选中后，文本框的值是：
uib-typeahead的用法和表单元素select中的表达式是一样的，可以分别指定显示的文本和选中的值。names用filter过滤器筛选输入的数据（按数组中每个元素的每个属性来过滤）。
uib-typeahead可以使用的属性有：
| 属性名 | 默认值 | 备注 |
| ng-model | 文本框的值 | |
| ng-model-options | 设置ng-model的选项。支持debounce和getterSetter | |
| typeahead-append-to | null | 指定智能提示的父元素 |
| typeahead-append-to-body | false | 智能提示内容放在 $body中，而不是它的父元素中 |
| typeahead-editable | true | 为true时文本框的值可以任意输入，为false时文本框的值只能从智能提示列表中选取 |
| typeahead-focus-first | true | 智能提示列表中的第一个值是否获取焦点 |
| typeahead-focus-on-select | true | 从智能提示列表中选中值后，文本框是否获取焦点 |
| typeahead-input-formatter | undefined | 选取值后格式化文本框内容 |
| typeahead-is-open | angular.noop | 绑定一个变量，表示智能提示列表是否展开 |
| typeahead-loading | angular.noop | 绑定一个变量，表示匹配项是否异步获取 |
| typeahead-min-length | 1 | 触发智能提示的最小输入字符数。必须大于等于0 |
| typeahead-no-results | angular.noop | 绑定一个变量，表示没有找到匹配项时的处理方式 |
| typeahead-on-select($item, $model, $label, $event) | null | 从列表中选中值后的回调函数。如果选中动作不是用户触发的，$event则为undefined |
| typeahead-popup-template-url | uib/template/typeahead/typeahead-popup.html | |
| typeahead-select-on-blur | false | 文本框失去焦点时，选中当前高亮的匹配项 |
| typeahead-select-on-exact | false | 只有一个匹配项时自动选中 |
| typeahead-show-hint | false | 输入内容的前半部分有匹配项时，是否提示后半部分 |
| typeahead-template-url | uib/template/typeahead/typeahead-match.html | |
| typeahead-wait-ms | 0 | 输入字符后，等待多少毫秒触发智能提示 |
在下面这个例子中，数据的获取是从服务端异步获取的：
<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<title></title> <script src="/Scripts/angular.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
<script> angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('TypeaheadCtrl', function ($scope, $http) {
$scope.selected = undefined; $scope.getNames = function (val) {
return $http.get('/home/GetNames', {
params: {
name: val
}
})
//.success(function (data, status, config, headers) {
// return data;
//});
.then(function (response) {
return response.data;
});
};
});
</script> </head>
<body>
<div ng-controller="TypeaheadCtrl">
<input type="text" ng-model="selected" uib-typeahead="n.name for n in getNames($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
</div>
</body>
</html>
需要注意的一点是：getNames()方法要返回一个promise，并且$http返回的promise要用.then()来处理，而不能用.success()来处理。此处有个疑问，既然.then()和.success()都是返回一个promise，为什么使用.success()时，智能提示列表无法获取到数据？
这是一个官方的例子，用来展示如何使用typeahead-template-url：
<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<title></title> <script src="/Scripts/angular.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
<script> angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('TypeaheadCtrl', function ($scope, $http) {
$scope.selected = undefined; $scope.statesWithFlags = [{ 'name': 'Alabama', 'flag': '5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png' }, { 'name': 'Alaska', 'flag': 'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png' }, { 'name': 'Arizona', 'flag': '9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png' }, { 'name': 'Arkansas', 'flag': '9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png' }, { 'name': 'California', 'flag': '0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png' }, { 'name': 'Colorado', 'flag': '4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png' }, { 'name': 'Connecticut', 'flag': '9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png' }, { 'name': 'Delaware', 'flag': 'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png' }, { 'name': 'Florida', 'flag': 'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png' }, { 'name': 'Georgia', 'flag': '5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png' }, { 'name': 'Hawaii', 'flag': 'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png' }, { 'name': 'Idaho', 'flag': 'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png' }, { 'name': 'Illinois', 'flag': '0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png' }, { 'name': 'Indiana', 'flag': 'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png' }, { 'name': 'Iowa', 'flag': 'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png' }, { 'name': 'Kansas', 'flag': 'd/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png' }, { 'name': 'Kentucky', 'flag': '8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png' }, { 'name': 'Louisiana', 'flag': 'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png' }, { 'name': 'Maine', 'flag': '3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png' }, { 'name': 'Maryland', 'flag': 'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png' }, { 'name': 'Massachusetts', 'flag': 'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png' }, { 'name': 'Michigan', 'flag': 'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png' }, { 'name': 'Minnesota', 'flag': 'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png' }, { 'name': 'Mississippi', 'flag': '4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png' }, { 'name': 'Missouri', 'flag': '5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png' }, { 'name': 'Montana', 'flag': 'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png' }, { 'name': 'Nebraska', 'flag': '4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png' }, { 'name': 'Nevada', 'flag': 'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png' }, { 'name': 'New Hampshire', 'flag': '2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png' }, { 'name': 'New Jersey', 'flag': '9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png' }, { 'name': 'New Mexico', 'flag': 'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png' }, { 'name': 'New York', 'flag': '1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png' }, { 'name': 'North Carolina', 'flag': 'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png' }, { 'name': 'North Dakota', 'flag': 'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png' }, { 'name': 'Ohio', 'flag': '4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png' }, { 'name': 'Oklahoma', 'flag': '6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png' }, { 'name': 'Oregon', 'flag': 'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png' }, { 'name': 'Pennsylvania', 'flag': 'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png' }, { 'name': 'Rhode Island', 'flag': 'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png' }, { 'name': 'South Carolina', 'flag': '6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png' }, { 'name': 'South Dakota', 'flag': '1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png' }, { 'name': 'Tennessee', 'flag': '9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png' }, { 'name': 'Texas', 'flag': 'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png' }, { 'name': 'Utah', 'flag': 'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png' }, { 'name': 'Vermont', 'flag': '4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png' }, { 'name': 'Virginia', 'flag': '4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png' }, { 'name': 'Washington', 'flag': '5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png' }, { 'name': 'West Virginia', 'flag': '2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png' }, { 'name': 'Wisconsin', 'flag': '2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png' }, { 'name': 'Wyoming', 'flag': 'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png' }];
});
</script> </head>
<body>
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
</a>
</script>
<div ng-controller="TypeaheadCtrl">
<input type="text" ng-model="selected" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" >
</div>
</body>
</html>
模板中的match表示智能提示列表中每一个匹配的选项，包含3个属性：id,label,model。label是绑定到列表中的每一项的文本，即state as state.name for state in statesWithFlags | filter:{name:$viewValue}中的state.name。model是列表中的每一项，即statesWithFlags数组中的每个元素。
效果是这样：
目录：
AngularJs的UI组件ui-Bootstrap分享（一）
AngularJs的UI组件ui-Bootstrap分享（二）——Collapse
AngularJs的UI组件ui-Bootstrap分享（三）——Accordion
AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup
AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination
AngularJs的UI组件ui-Bootstrap分享（六）——Tabs
AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown
AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover
AngularJs的UI组件ui-Bootstrap分享（九）——Alert
AngularJs的UI组件ui-Bootstrap分享（十）——Model
AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead
AngularJs的UI组件ui-Bootstrap分享（十二）——Rating
AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar
AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel
AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead的更多相关文章
- Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu
1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...
- Ionic4.x 中的 UI 组件(UI Components) 日期组件
1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- Ionic4.x 中的 UI 组件(UI Components)表单相关组件
1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...
- 挂号平台首页开发（UI组件部分）
JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...
- AngularJs的UI组件ui-Bootstrap分享（一）
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...
- AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel
Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...
- AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar
进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...
- AngularJs的UI组件ui-Bootstrap分享（十二）——Rating
Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...
随机推荐
- JAVA 1.4 算术运算
1. 如果在一个算术运算中有int,double,float那么最终运算的结果是double,那么也就是说参与运算的类型和得到的结果:结果一定是参与运算的精度最高的那个类型 2. 算术运算中的除法 i ...
- DBUTIL 调用存储过程例子
执行存储过程和执行select查询相比,无非就是SQL语句不同.下面是一个用存储过程查记录的例子.根据你的数据库不同和域对象不同,此代码要修改 Java code ? 1 2 3 4 5 Quer ...
- DNS域名解析服务器
域名解析服务器,靠它把你要访问的网址找到然后把信息送到你电脑上.DNS 是域名系统 (Domain Name System) 的缩写,它是由解析器和域名服务器组成的.域名服务器是指保存有该网络中所有主 ...
- 关于malloc的一些想法
之前一段时间翻阅过一些内存分配的资料,这次终于能将其整理记录下来了. c标准库里有两个耳熟能详的函数,用于对堆空间的内存进行分配和释放,它们分别是: malloc.负责分配一个指定大小的一块内存给调用 ...
- Centos系统下Lamp环境的快速搭建
首先为了搭建一个稳定的lamp的练习环境,确保你的虚拟机可以连网,这里我们使用的yum安装,它可以帮助我们解决软件自己的依赖关系.我还在后面加了postgresql数据库如果不需要的话可以去掉和pos ...
- Javascript中apply、call、bind
网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript ...
- js页面跳转(含框架跳转)整理
js方式的页面跳转1.window.location.href方式 <script language="javascript" type="text/java ...
- xtrapivotcontrol 控件用法及相关属性
XtraPivotControl使用指南:可参照以下的文档: 转载自:http://wenku.baidu.com/view/d7886b20aaea998fcc220e53.html 上面链接中对x ...
- Windows 10系统更换Windows 7系统磁盘分区注意事项二
1.在原WIN10系统中将硬盘的GPT分区表格式转换为MBR分区表格式 上一篇关于新机预装WIN10系统更换为WIN7系统中说到需要将硬盘的GPT分区表格式转换为MBR分区表格式,在文章末尾给出的链接 ...
- js中正则表达式 ---- 现成
1 . 校验密码强度 密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间. ^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 2. 校验中 ...