推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件

前言

今天利用中午午休时间，给大家分享推荐一款基于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

随机推荐

Memcache修改端口
修改端口网上很多的说法都无法起作用(像下面这样) D:\.......memcached -p 10000 -d start 现在有两种解决方法 ①直接修改注册表 HKEY_LOCAL_MACHIN ...
Tomcat如何添加管理员
为Tomcat添加管理员,然后用管理员登录后就可以看到所有加载的工程包,以及运行的平台,还可以对项目进行管理,比如删和添加. 一.工具:apache-tomcat-7.0.39 二.添加步骤 1. 首 ...
html列表
有序列表 <ol type="A", start="C">  <li>第一项</ ...
Linux ethtool命令
一.简介 ethtool 是用于查询及设置网卡参数的命令. 二.常用选项 ethtool ethx //查询ethx网口基本设置,其中 x 是对应网卡的编号,如eth0.eth1等等 ethtool ...
Mathout
1. 用Maven搭建Mahout的开发环境,并完成PPT 26页,最简单的例子.要求有过程说明和截图. 2. 用案例的数据集,基于Mahout,任选一种算法,对任意一个女性用户进行协同过滤推荐,并解 ...
Geoserver发布WMS服务出错分析
使用Geoserver发布一个空间表,在图层预览的过程中没有任何问题,但是当我根据这个空间表传创建视图再发布wms服务,访问时就会报错,错误信息如下: Caused by: java.sql.SQLE ...
hdu-5496 Beauty of Sequence(递推)
题目链接: Beauty of Sequence Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java ...
Codeforces Round #258 D Count Good Substrings --计数
题意:由a和b构成的字符串,如果压缩后变成回文串就是Good字符串.问一个字符串有几个长度为偶数和奇数的Good字串. 分析:可知,因为只有a,b两个字母,所以压缩后肯定为..ababab..这种形式 ...
两道相似KMP题
1.POJ 3450 Coporate Identity 这两题的解法都是枚举子串,然后匹配,像这种题目以后可以不用KMP来做,直接字符串自带的strstr函数搞定,如果字符串未出现,该函数返回NUL ...
HDU 1698 & UESTC 1228 Just a hook
算是线段树中的一道水题了,必须用到懒操作,否则会超时.或者也可以刚开始不计算和,只更新节点,最后算整个线段的颜色和. 1.懒操作法 /* 908ms 3448KB in HDU OJ*/ #inclu ...

推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput

前言

推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput的更多相关文章

随机推荐

热门专题