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.

Read Also:  PHP Convert multi-dimentional array into single array

Autocomplete in angularjs

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

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.

Read Also:  how to make autocomplete textbox by using AngularJS?

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  JavaScript Image Thumbnails Preview Gallery
  2. Read Also:  Simple AutoComplete AngularJS Example
  3. Read Also:  jquery ajax dropdown onchange example in php MySQL Database
  4. Read Also:  Laravel Send Emails Mailgun setup Tutorial
  5. Read Also:  PHP Crop Resize Image while Uploading using jquery plugin
  6. Read Also:  JQUERY Examples Programming Tutorials
  7. Read Also:  PHP codeigniter form validation Example
  8. Read Also:  sql having clause Examples
  9. Read Also:  Previous and next buttons functionality in javascript
  10. Read Also:  how to get youtube subscribers count in php [updated 2021 JAN]?