How to create a facebook style autocomplete using Angularjs

This tutorial explains how to show autocomplete results for a textbox input using AngularJS, PHP and MySQL with the help of Angular UI directive.
Live Demo Facebook type autocompleteDownload this project
To achieve the desired autocomplete functionality, We will be using Bootstrap UI directive library for AngularJS.
Angular UI Directives: A library of essential bootstrap components written in pure AngularJS by AngularUI Team.
Its easy to set up
Download and include the js file in 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>
Inject the dependency on the ui.bootstrap module and get the data from the database using \$ajax at your app.js file
var app = angular.module('myApp', ['ui.bootstrap'])
app.controller('autocompleteController', function($scope, $http) {
getCountries() // Load all countries with capitals
function getCountries() {
$http.get('ajax/getCountries.php').success(function(data) {
$scope.countries = data
})
}
})
Create a custome template to hold the output at your autocomplete.html file
<script id="customTemplate.html" type="text/ng-template">
<a><span bind-html-unsafe="match.label | typeaheadHighlight:query"><i>({{match.model.capital}})
</script>
Bind the typeahead directive into your input field.
<input class="form-control" ng-model="selectedCountries" placeholder="Search Countries" style="width:350px;" type="text" typeahead="c as c.country for c in countries | filter:$viewValue | limitTo:10" typeahead-min-length="1" typeahead-on-select="onSelectPart($item, $model, $label)" typeahead-template-url="customTemplate.html"></input>
Import the countries.sql into your database which contains country names and capitals
The getCountries.php file which gets all the countries with capitals from MySQL database
<?php require_once '../includes/config.php';
$query="select distinct c.country, c.capital from countries 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);
?>
This will populate the countries scope, Which in turn binds to our Search Countries input

Most Popular Posts
- ShopNx - The assistant manager for influencers
- Frontendfun marketplace for software projects
- Complete steps to configure elasticsearch on Ubuntu
- Configure Vultr for Nodejs Deployment
- Appointment Booking Microservice using Javascript Fullstack
- 100+ most effective ways to promote a new blog for free
- Steps to Configure Digital Ocean Droplet for Nodejs Application Deployment
- Appointment Booking using Angularjs, Nodejs, Mongodb
- Send email with PDF attachment using PHP
- Simple task manager application using Angularjs PHP Mysql
- Steps to Configure Amazon EC2 for Nodejs app deployment
- Inventory Manager Using Angularjs Mysql Php
- User authentication using Angularjs, PHP, Mysql
- Demo of a simple CRUD Restful php service used with Angularjs and Mysql
- Simple file upload example using Angularjs
- Generate PDF using PHP from Mysql database
- Creating REST API using Nodejs and consuming in Angularjs
- Simple project demonstrates how to send email using Nodejs
- Voting system similar to stackoverflow using Angularjs PHP and Mysql
- Angularjs datagrid paging, sorting, filter using PHP and Mysql
- Useful database helper class to generate CRUD statements using PHP and Mysql
- Online Shopping Mega Menu using Angularjs, PHP, Mysql
- How to create a facebook style autocomplete using Angularjs
- Steps configuring PHP Cron Jobs - Godaddy
- How to change Mysql password
- A simple Angularjs web app that converts text to url format
- Creating SWAP file on Linux