前言
今天利用中午午休時間,給大家分享推薦一款基於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