AngularJS AutoComplete Search Dynamic Data using Web API

AngularJS AutoComplete Search Dynamic Data using Web API

In this Post We Will Explain About is AngularJS AutoComplete Search Dynamic Data using Web API With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AutoComplete Textbox in AngularJS with Dynamic Data using Web APIExample

In this post we will show you Best way to implement autocomplete angularjs using directive and factory, hear for create simple autocomplete using AngularJSwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

The autocomplete simple and easy to select option functionality gives the user data to suggestions based on its select input. From there, we can select an any option.

include Sctipts

	<a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js</a> 

index.html

<div class="container">
	<h1 align="center">AutoComplete using AngularJS</h1>
	<hr />
	<!-- Devloped By : infinityknow.com -->
	<div>
		<label>Select your Product Name</label>
		
		
		<ul class="list-group">
			<li class="list-group-item list-group-item-success">{{Productinfo}}</li>
		</ul>
		<hr />
		<p>You have Selected <b>{{ Product }}</b></p>
	</div>
</div>

script.js

  
var liveapp = angular.module("live_auto_complete", []);
liveapp.controller("liveCtrl", function($scope) {
	$scope.product_list = ["Laravel","PHP","AngularJs","VueJs","HTML","API","JavaScript"
];
	$scope.get_total = function(param_str) {
		$scope.product_hide = false;
		var data_results = [];
		angular.forEach($scope.product_list, function(Product) 
		{
			if (Product.toLowerCase().indexOf(param_str.toLowerCase()) >= 0) 
			{
				data_results.push(Product);
			}
		});
		$scope.search_products = data_results;
	}
	$scope.select_textbox = function(param_str) 
	{
		$scope.Product = param_str;
		$scope.product_hide = true;
	}
});  
 

Full Example of : AutoComplete using AngularJS

	 
	<title>Live24u | AutoComplete using AngularJS Example</title>  
	
	<a href="http://angular.min.js">http://angular.min.js</a>  
  
  
<div class="container">
	<h1 align="center">AutoComplete using AngularJS</h1>
	<hr />
	<div>
		<label>Select your Product Name</label>
		
		
		<ul class="list-group">
			<li class="list-group-item list-group-item-success">{{Productinfo}}</li>
		</ul>
		<hr />
		<p>You have Selected <b>{{ Product }}</b></p>
	</div>
</div>
<!-- Scripts Devloped By : infinityknow.com -->
  
var liveapp = angular.module("live_auto_complete", []);
liveapp.controller("liveCtrl", function($scope) {
	$scope.product_list = ["Laravel","PHP","AngularJs","VueJs","HTML","API","JavaScript"
];
	$scope.get_total = function(param_str) {
		$scope.product_hide = false;
		var data_results = [];
		angular.forEach($scope.product_list, function(Product) 
		{
			if (Product.toLowerCase().indexOf(param_str.toLowerCase()) >= 0) 
			{
				data_results.push(Product);
			}
		});
		$scope.search_products = data_results;
	}
	$scope.select_textbox = function(param_str) 
	{
		$scope.Product = param_str;
		$scope.product_hide = true;
	}
});  
 
  
  

Example

I hope you have Got What is Create autocomplete search with AngularJS and PHP And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.