Friday 24 February 2017

angularjs autocomplete $http 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.
<title>Getting Search Remote Data in Simple JSON format using $http from</title>
<script src="yourapplicationfoldername/angular.min.js">
<script src="yourapplicationfoldername/ui-bootstrap-tpls.min.js"></script>
<body ng-app="ngmyAppdemo">
<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" >
 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"];

Second Example : angularjs autocomplete $http example with demo

<html ng-app="ngmyAppdemo">
  <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">
  <body class="well">
 <div class='container-fluid' ng-controller="EXTypeaheadngCtrl">
  <pre>Select value using Model: {{langselected| json}}</pre>
  <input type="text" ng-change="demooneditExample()" ng-model="langselected" typeahead="slang for slang in languageslist | filter:$viewValue">


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>


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


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


$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