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

随机推荐

cocos2d-x之物理引擎之碰撞监测
#include "HelloWorldScene.h" USING_NS_CC; #define RED_BIT_MASK 0b0100 #define GREEN_BIT ...
Eclipse和MyEclipse 手动设置 Java代码注释模板
一.目的 1. 为什么需要注释规范? 注释规范对于程序员而言尤为重要,有以下几个原因: 一个软件的生命周期中,80%的花费在于维护. 几乎没有任何一个软件,在其整个生命周期中,均由最初的开发人员来维 ...
C语言的数据类型及其对应变量
声明,定义和初始化声明标识符iden是告诉编译器"有这么一个变量var,具体var里是什么,你自己去看".声明只需要标识符的类型和标识符名字,C语言的任何标识符在使用前都需要声明 ...
hdu 2874 Connections between cities [LCA] (lca->rmq)
Connections between cities Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
单调队列应用--BZOJ 3831 Little Bird
3831: [Poi2014]Little Bird Time Limit: 20 Sec Memory Limit: 128 MB Description In the Byteotian Lin ...
JAVASE笔记回顾
第一部分,JAVA基础和面向对象 part01 入门与开发环境搭建 1: 计算机基础知识(了解)(1)计算机(2)计算机硬件(3)计算机软件系统软件:windows,linux,mac应用软件:QQ, ...
leetcode-Spiral Matrix II 螺旋矩阵2之python大法好，四行就搞定，你敢信？
Spiral Matrix II 螺旋矩阵 Given an integer n, generate a square matrix filled with elements from 1 to n2 ...
HDU 5102 The K-th Distance
题意:给你n-1条边,然后没两个节点的距离按照递增的顺序,求出前k项的和. 官方题解: 把所有边(u,v) 以及(v,u)放入一个队列,队列每弹出一个元素(u,v),对于所有与u相邻的点w,如果w!= ...
Java虚拟机详解05----垃圾收集器及GC参数
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
Auto Clear Unity Console Log
功能可以在Editor模式下执行,当然也可以Runtime模式下执行,自动清除 Console的log信息功能需求当在制作Editor的一些功能时,常常需要手动的点击Console窗口的Clea ...

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

前言

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

随机推荐

热门专题