Angular Autocomplete multiple Tags value

Today, We want to share with you Angularjs Autocomplete multiple Tags value.In this post we will show you angularjs autocomplete multiple values Example, hear for ngTagsInput – Tags input directive for AngularJS we will give you demo and example for implement.
In this post, we will learn about angularjs – Angular multi selector autocomplete with an example.

Getting Search Remote Data in Simple JSON format using $http from: angularjs autocomplete to search for matches data from local or remote server data sources and display user friendly output.
angularjs autocomplete is a special search input data component with a display drop-down of all user need to possible matches – result to a create a custom query.

READ :  Vuejs Input multiple Tags with dynamic autocomplete using Tag Manager

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.angularjs autocomplete multiple values Example

angularjs autocomplete multiple values Example

<html>
<head>
<title>Getting Search Remote Data in Simple JSON format using $http from</title>
<script src="yourapplicationfoldername/angular.min.js">
</script>
<script src="yourapplicationfoldername/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-app="ngmyAppdemo">
<section>
<div class="form-group" ng-controller="ngAutoCompletesimpleControllerEx">
	<label class="sr-only" for="Source Station">Select Your Favourite Languages</label>
	<input type="text" ng-model="langName" placeholder="fruit Name" typeahead="item for item in languageslist | filter:$viewValue | limitTo:7" class="form-control" >
</div>
</section>
</body>
<script>
	var exApp = angular.module('ngmyAppdemo', ['ui.bootstrap']);
	 
	function ngAutoCompletesimpleControllerEx($scope, $http) 
	{
		$scope.langName = undefined;
		$scope.languageslist = ["Laravel", "PHP", "HTML","Example","Download","DEMO","Angularjs","Ionic", "MVC","Vuejs","Oracle", "SQL","MEAN.js","CI"];
	}
</script>
</html>

Second Example : angularjs autocomplete $http example with demo

<html ng-app="ngmyAppdemo">
  <head>
  <title>Getting Search Remote Data in Simple JSON format using $http from</title>
    <script src="yourapplicationfoldername/angular.js"></script>
    <script src="yourapplicationfoldername/ui-bootstrap-tpls-0.4.0.js"></script>
    <script src="yourapplicationfoldername/examplescript.js"></script>
    <link href="yourapplicationfoldername/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body class="well">
	<div class='container-fluid' ng-controller="EXTypeaheadngCtrl">
		<pre>Select value using Model: {{langselected| json}}</pre>
		<pre>{{languageslist}}</pre>
		<input type="text" ng-change="demooneditExample()" ng-model="langselected" typeahead="slang for slang in languageslist | filter:$viewValue">
	</div>
  </body>
</html>

examplescript.js

angular.module('ngmyAppdemo', ['ui.bootstrap']); // init module

function EXTypeaheadngCtrl($scope)  // call a controller
{
  $scope.langselected = undefined;
  $scope.languageslist = [];
  
  $scope.demooneditExample = function() // call demooneditExample function
  {
    $scope.languageslist = [];
    
         $scope.languageslist=["Laravel", "PHP", "HTML","Example","Download","DEMO","Angularjs","Ionic", "MVC","Vuejs","Oracle", "SQL","MEAN.js","CI"];

  }
}

Example of autocomplete in angularjs with jquery

include Scripts

<script src="yourapplicationfoldername/jquery-2.1.1.min.js"></script>
<script src="yourapplicationfoldername/jquery-ui.min.js"></script>
<script src="yourapplicationfoldername/autocomplete.js"></script>

App

var exApp = angular.module('neamYourAppex', ['angular-jquery-autocomplete']); //init Module

View

<input id="ExampleName" placeholder="{{ 'Events_Search' | translate }}" data-ng-model="event.device.languages" autocomplete autocompleteconfig="demolabelexDevicesimAutoCompletebox"  class="form-control"/>

Controller

$scope.demolabelexDevicesimAutoCompletebox = {
    source: function (request, response) { //call a Function
        var array = []; // init array
        array.push({ languages: 'Laravel', value: 1 });
        response(array); //response display here
    },
    minLength: 4, // set display minLength
    select: function (event, ui) { //call a Function
        this.value = ui.item.languages; // set this langvalues

        return false; //return false
    }
};

Demo :

http://plnkr.co/edit/hwYgLHLxUs2dS4Hvrllk?p=preview

READ :  AngularJS ui router nested views - AngularJS nested directive controller example

http://jsfiddle.net/sebmade/swfjT/