angularjs autocomplete $http example

Friday, 24 February 2017

angularjs autocomplete $http example

Posted By: abhishek verma Friday, February 24, 2017 Leave a Reply
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.
<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
    }
};

0 comments: