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

随机推荐

《ASP.NET MVC 5 框架揭秘》
<ASP.NET MVC 5 框架揭秘> 基本信息作者: 蒋金楠出版社:电子工业出版社 ISBN:9787121237812 上架时间:2014-8-1 出版日期:2014 年8月开 ...
谈谈Java的集合组件
让我们一起谈谈Java的集合组件我们在使用Java的时候,都会遇到并使用到Java的集合.在这里通过自己的理解和网上的资源对Java的集合方面的使用做一个简单的讲解和总结. Java主要分为3个集合 ...
Github学习之路-小试牛刀，练习Git 的基本操作
一.下子windows客户端. Git 客户端下载地址:http://msysgit.github.io/ 二.打开Git Bash 命令行操作界面. 安装完成后,在开始菜单里找到“Git”-> ...
Eclipse中修改SVN用户名和密码方法（转）
由于在svn 的界面中并没有为我们提供直接更换用户名密码的地方,所以一旦我们需要更换用户名的就需要自己想一些办法. 解决方案: 在Eclipse 使用SVN 的过程中大多数人往往习惯把访问SVN 的用 ...
NFS（Network File System）服务配置和使用
Sun公司开发NFS (Network File System)之初就是为了在不同linux/Unix系统之间共享文件或者文件夹.可以在本地通过网络挂载远程主机的共享文件,和远程主机交互.NFS共享存 ...
[转]Responsive Tables Demo
本文转自:http://elvery.net/demo/responsive-tables/ A quick and dirty look at some techniques for designi ...
hadoop data 相关开源项目（近期学习计划）
计划学习几个hadoop相关的开源项目: 1.spring hadoop 2.spring batch 3.spring redis 4.spring mongo 相关项目样例:https://git ...
hyperstart 容器创建流程分析
hyperstart中运行的pod的核心数据结构如下所示: struct hyper_pod { struct hyper_interface *iface; struct hyper_route * ...
Floyd判最小环算法模板
算法思想:如果存在最小环,会在编号最大的点u更新最短路径前找到这个环,发现的方法是,更新最短路径前,遍历i,j点对,一定会发现某对i到j的最短路径长度dis[i][j]+mp[j][u]+mp[u][ ...
Android开发环境搭建（转）
转载:http://www.cnblogs.com/zoupeiyang/p/4034517.html#1 引言在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想 ...

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

前言

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

随机推荐

热门专题