推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput
前言
今天利用中午午休时间,给大家分享推荐一款基于Angularjs的自动完成(Autocomplete)标签及标签组插件--ngTagsInput,功能超强大的。不信,你试试就知道^_^。。。
AutoComplete-- 自动完成对开发人员来说应该不会太陌生,特别是前端开发者。即用户在文本框中输入内容或者当文本框获得焦点时智能提示与用户输入有关的建议内容。最常见的 百度(baidu.com)、谷歌(google.com)等的搜索框就是这样来设计的。目的是为了给用户提供一个更好的输入体验。
在Angularjs还未出现之前,有一些基于Jquery的Autocomplete插件。如今Angularjs日趋成熟和流行,我们当然得紧跟步伐,使用Angluarjs来完成同样的自动完成功能哦。
ngTagsInput是国外开发者开发的开源Angularjs插件,项目发布在github.com上:https://github.com/mbenford/ngTagsInput
示例地址:http://mbenford.github.io/ngTagsInput/demos
ngTagsInput在智能提示功能上与百度搜索类似,但在一个文本框中输入标签(特别是多标签)的情况下,就表现得非常强大了。
类似这样的功能,相信做前端的同学应该不会不认识吧。
之所以说ngTagsInput强大,是因为:
1.支持目前主流浏览器(Chrome 31+, Firefox 29+, Safari 7+, Opera 12+, IE 10+)
2.文档十分完善
3.支持各种配置和自定义选项
4.使用非常简单
来个ngTagsInput的简单但完整的示例:
<html>
<head>
<script src="angular.min.js"></script>
<script src="ng-tags-input.min.js"></script>
<link rel="stylesheet" type="text/css" href="ng-tags-input.min.css">
<script>
angular.module('myApp', ['ngTagsInput'])
.controller('MyCtrl', function($scope, $http) {
$scope.tags = [
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
];
$scope.loadTags = function(query) {
return $http.get('/tags?query=' + query);
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<tags-input ng-model="tags">
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
</body>
</html>
怎么样,看到这里有没有一些想赶紧体验的冲动呢?
行动吧,体验吧,骚年!!!做IT这行最重要的就是不断地探索并付诸行动,不实践你是永远不知道会发生什么的!!!
最后,如果你觉得我分享的资源还不错的话,请点个赞吧,也算是对我付出劳动的一点点肯定。Thank you!!!
-------------------------------------------------------------------------------------------------
本文同步发布于图享网【http://2sharings.com】--推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput
- PHP-循环
- 日志分析实战之清洗日志小实例3:如何在spark shell中导入自定义包
- PHP-函数
- hdu----(5045)Contest(数位dp)
- hdu----(5053)the Sum of Cube(签到题,水体)
- RHEL构建DNS服务器-多区域
- hdu----(5050)Divided Land(二进制求最大公约数)
- 日志分析实战之清洗日志小实例1:使用spark&Scala分析Apache日志
- RHEL构建DNS服务器-单区域
- hdu----(5047)Sawtooth(大数相乘+数学推导)
- hdu----(4522)湫湫系列故事——过年回家(最短路)
- hdu---(1421)搬寝室(dp)
- hdu----(1257)最少拦截系统(dp/LIS)
- nginx安装Fancy美化索引目录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 小程序轮播中嵌入视频-关于swiper、video组件与block标签
- Pocket重建您的专注力
- redux-thunk
- 使用vuepress-6小时搭建一个完全免费的个人网站
- 使用item2+oh my zsh优化终端体验
- Svelte中文文档 1基础介绍
- 分布式事物TCC
- docker环境搭建nexus私有maven私服
- mysql每天定时自动全库备份、灾备、docker
- wails Go+vue/angular/react编写桌面GUI客户端
- GIT仓库、源码管理服务器gitea的安装、htttps访问
- 微信小程序显示当前系统年月日时分秒
- 【每日一题】40. Combination Sum II
- nginx url自动301加斜杠
- 【剑指offer】47.求1+2+3+...+n