推荐一款超强大的基于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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python学习路

九、Python+Selenium模拟登录

 研究QQ登录规则的话,得分析大量Javascript的加密解密,比较耗时间。自己也是练习很少,短时间成功不了。所以走了个捷径。 Selenium是一个WEB自...

42370
来自专栏即时通讯技术

腾讯技术分享:社交网络图片的带宽压缩技术演进之路

腾讯社交网络相关产品,例如腾讯课堂、增值会员、动漫、直播、游戏商城、音乐、Qzone校园等,主要目标群体定位为年轻一代,属于对新事物接受比较高也更喜欢新鲜个性内...

34220
来自专栏ThoughtWorks

关于前端的思考:AngularJS 2.0以及前后端边界 | TW洞见

今日洞见 文章作者来自ThoughtWorks:吕靖,文中插图来自网络。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任...

45280
来自专栏IT技术精选文摘

《王者荣耀》2亿用户量的背后:产品定位、技术架构、网络方案等

67570
来自专栏PPV课数据科学社区

干货 | 提高程序员工作效率的必备工具

导语:工欲善其事必先利其器,作为一名程序员,如果要提高开发效率,外部的辅助工具少不了,今天,为大家推荐一下程序员提高效率的必备工具。

13020
来自专栏跨界架构师

如何一步一步用DDD设计一个电商网站(二)—— 项目架构

    上一篇我们讲了DDD的核心概念(附上链接),并且设计了我们的上下文映射图,那么接下来就准备开始立项了,本篇文章的部分知识点可能对一部分人来说比较基础,可...

51310
来自专栏Android 开发者

Android Support Library 的新增功能 | 中文教学视频

21130
来自专栏编程微刊

2017年度最流行的十大中国开源软件

78030
来自专栏Java后端技术

细谈WEB标准

  最近有些朋友很是疑惑web标准是什么,我在这里先做一个总结,有更好的见解的可以私信给我!

12130
来自专栏沈唁志

网站F12显示一个有趣的 console.log 信息

65630

扫码关注云+社区

领取腾讯云代金券