Angularjs – How To Create Autocomplete on an Input Field?

Today, We want to share with you autocomplete textbox in angularjs.In this post we will show you how to get selected value from autocomplete textbox in angularjs, hear for Implement Autocomplete textbox using AngularJS from database we will give you demo and example for implement.In this post, we will learn about AngularJS Search Auto Suggestion box with PHP MySQLi with an example.

Autocomplete in angularjs

here we can learn to How to create a facebook style autocomplete using Angularjs?

Read Also:  how to get raw query in codeigniter

step 1: index.html

<script src="js/angular.min.js" type="text/javascript"></script>  
<script src="js/ui-bootstrap-tpls-0.9.0.js"></script>  
<script src="app/app.js" type="text/javascript"></script> 

step 2: $ajax at your app.js file

 var app = angular.module('pakainfoApplication', ['ui.bootstrap']);
    app.controller('autocompleteController', function($scope, $http) {  
        getProducts(); // Load all products with categorys  
        function getProducts(){  
            $http.get('ajax/getProducts.php').success(function(data){  
                $scope.products = data;  
            });  
        };  
    });

autocomplete.html

<script id="customTemplate.html" type="text/ng-template"><a><span bind-html-unsafe="match.label | typeaheadHighlight:query"><i>({{match.model.category}})</script>  

Bind the typeahead directive

<input class="form-control" ng-model="selectedProducts" placeholder="Search Products" style="width:350px;" type="text" typeahead="c as c.members for c in products | filter:$viewValue | limitTo:10" typeahead-min-length="1" typeahead-on-select="onSelectPart($item, $model, $label)" typeahead-template-url="customTemplate.html"></input>  

getProducts.php

<?php require_once '../includes/config.php';

$query="select distinct c.members, c.category from products c order by 1";
$result = $mysqli-?>
query($query) or die($mysqli->error.__LINE__);

$arr = array();  
    if($result->num_rows > 0) {  
    while($row = $result->fetch_assoc()) {  
    $arr[] = $row;  
    }  
    }

# JSON-encode the response  
echo $json_response = json_encode($arr);  
?>  

I hope you get an idea about Auto Complete Text box in Angular.JS with Dynamic Data using Web API.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.