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.

facebook type autocomplete using php mysql angularjs

Live Demo Download

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.

Inject the dependency on the ui.bootstrap module and get the data from the database using $ajax at your app.js file

Create a custome template to hold the output at your autocomplete.html file

Bind the typeahead directive into your input field.

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

This will populate the countries scope, Which in turn binds to our Search Countries input

Print Friendly

Related Posts

Written By:
  • absfrm

    Hey main thank you for sharing this nice 🙂

  • mariagrazia

    How can I do this using just a php array called with json_encode? 🙁 I’m new on coding…

  • Giovani

    How can I print a mensage when don’t have the word I looking for? thanks…amazing article..incredible…

  • Pavel Dubinin

    That looks promising, I think Live Demo is broken now though

  • carry

    how to sort values (OrderBy)

  • Alex Gutierrez

    Thank you. It worked.

  • Matheus

    If instead of load all countries, if you had to load on demand, as you would?

    • Saizeci

      quite right mate, everyone uses json data. Why you would you do something like that? Its an HUGE overhead. Can anyone modify the code in order to make the search directly into the database, not in the json?

      • Alex

        Agreed. I’ve got a MongoDb with thousands of items. It would be a huge json file just to transmit name and id info. It’d be nice to know how to to use angular to query that would return just the json you need. It sounds like this would be even simpler than implementing autocomplete on the browser side.

  • Ciro Miné Oyarzún

    Thnaks a lot! the most simply example I had found!!

  • sancoLgates

    thanks, great helps.

  • Andres

    Very bad coding practices man! You shouldn’t do (statement or die()) anymore, there’s no reason to call your array “arr”, there’s no reason to assign json_encode to $json_encode…

    Other than that, good article 🙂

    • itswadesh

      Thanks for pointing out those issues. I will take care in next article.

  • Mcperson

    Thanks for the code, it works fine.
    I’m trying to do the same with a virtual keyboard without sucess.
    The virtual keyboard dont take the data from the DB, just with the fisical keyboard 🙁

  • bhavani malladi

    is it possible to create this dynamically ?? like with click??

  • sudeep

    can anyone suggest how change UI of autocomplete in this case ..?

  • amit tanwani

    In this demo first all the data has been retrieved then search has been going , what if we have to run search on bulky data about 50000 entries then it not good to get all the data then search , it will surely affect the performance.

    what will be the solution for that .

  • Pingback: Facebook Api Angular | Fresh Water()

  • pappu p

    I need a submit button that calls another controller to fetch data based on keyword in the input field. Can somebody please help? I am stuck..

  • motilal


  • muhammad tayyab

    how to select multiple values? any body can help?

  • Awesome work, another great resource to learn Angular JS from basic level is

  • Steven

    How could I make this work so that if I typed in the country and select the country that capital would go into a capital field box?