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

随机推荐

C# Ftp文件处理
1.创建文件夹 /// <summary> /// ftp创建文件夹(只能创建单层目录) /// </summary> /// <param name="Uri ...
UC 浏览器远程调试手机web网页记录
浏览器远程调试插件有很多,本来要使用chrome浏览器的调试插件的,但是需要FQ才能使用(公司网络有限制,果断放弃),最终选择使用UC浏览器的. 其实UC官网插件使用已经介绍的很详细了,但是有几处坑需 ...
cocos2d-x之物理按键初试
bool HelloWorld::init() { if ( !Layer::init() ) { return false; } auto listener=EventListenerKeyboar ...
python 解析json loads dumps
认识引用模块重要函数案例排序缩进参数压缩参考认识 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standa ...
mysql sql获取上条插入id，update影响行数
1.获取上条插入数据 LAST_INSERT_ID(); 2.获取update影响行数. ROW_COUNT(); mysql> UPDATE t -> SET address = 'be ...
table边框美化
在<table>里面加代码就可以了. 效果1: <TABLE style="BORDER-RIGHT: #993333 3px dashed; BORDER-TOP: #9 ...
探索 OpenStack 之（14）：OpenStack 中 RabbitMQ 的使用
本文是 OpenStack 中的 RabbitMQ 使用研究两部分中的第一部分,将介绍 RabbitMQ 的基本概念,即 RabbitMQ 是什么.第二部分将介绍其在 OpenStack 中的使用. ...
uva 11572 unique snowflakes——yhx
Emily the entrepreneur has a cool business idea: packaging and selling snowakes. She has devised ama ...
一道题看bitset应用 --ZOJ 3642
题意:给n个文件,包括文件名和文件大小,然后给出k个关键词,查询包含该关键词的文件的大小总和.文件名为一些中括号括起的关键词的合集. 解法:可用bitset记录每一个关键词在哪些文件中出现,然后查询即 ...
BUG描述规范
BUG描述规范一. 目的与适用范围 1.1 目的报告软件测试错误的目的是为了保证修复错误的人员可以明确报告的错误,从而有利于分析错误产生的原因,定位错误,然后修正之.因此,报告软件测试错误的基本要 ...

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

前言

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

随机推荐

热门专题