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

随机推荐

Effective Java 17 Design and document for inheritance or else prohibit it
Principles The class must document its self-use of overridable methods. A class may have to provide ...
mongo学习笔记（五）：分片
分片人脸: 代表客户端,客户端肯定说,你数据库分片不分片跟我没关系,我叫你干啥就干啥,没什么好商量的. mongos: 首先我们要了解”片键“的概念,也就是说拆分集合的依据是什么?按照 ...
nginx添加模块 (非覆盖安装)
nginx添加模块(非覆盖安装) 原已经安装好的nginx,现在需要添加一个未被编译安装的模块: 查看原来编译时都带了哪些参数# /usr/local/nginx/sbin/nginx -V ngin ...
python基础入门
Python简介 python是吉多·范罗苏姆发明的一种面向对象的脚本语言,可能有些人不知道面向对象和脚本具体是什么意思,但是对于一个初学者来说,现在并不需要明白.大家都知道,当下全栈工程师的概念很火 ...
Android中的Shape使用总结
参考:http://www.cnblogs.com/gzggyy/archive/2013/05/17/3083218.html 在Android程序开发中,我们经常会去用到Shape这个东西去定义各 ...
如何在WIN7下进行LINUX虚拟机搭建
Linux是一套免费使用和自由传播的类Unix操作系统,非常适用于搭建网络服务器等,我本人日常工作时,是使用的LINUX和WIN7双操作系统,但每次更换系统总要关机重启很不方便,所以也在WIN7下搭建 ...
[转]移动web开发中meta标签作用
今天在尝试做移动页面的时候遇到了一个问题,<meta content="telephone=no,email=no" name="format-detection& ...
【读书笔记《Android游戏编程之从零开始》】16.游戏开发基础（动画）
1. Animation动画在Android 中,系统提供了动画类 Animation ,其中又分为四种动画效果: ● AlphaAnimation:透明度渐变动画 ● ScaleAnimati ...
python中property干什么用的？
先来段官方文档压压惊.. property(fget=None, fset=None, fdel=None, doc=None) Return a property attribute. fget i ...
mysql 存储过程，以及mybatis如何调用
说道存储过程,很多人都知道,但是真正用的人其实很少,但是在某些必要的场景,是必须使用的,虽然可以使用java代码解决,但是效率性能远不及存储过程曾经在sqlserver 以及pgadmin上用过,m ...

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

前言

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

随机推荐

热门专题