Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

How to Build an Autocomplete System Like Google

Ismail Raji, Software Engineer, Web Developer and Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Videos (49m)
    • 1- Welcome

    • 2- What you should know before watching this course

    • 3- Anlayzing and returning data

    • 4- Creating the interface

    • 5- The Keyup Event Part1

    • 6- The Keyup Event Part2

    • 7- getResults & displayResults Functions

    • 8- ChooseResult Function

    • 9- Next Step


About This Class

Greeting everyone and welcome to this course on how to build an autocomplete system using JavaScript and PHP.

Generally, an autocomplete system needs three different technologies:

  • Client-side language to communicate with the server: We will use JavaScript.
  • Server-side language capable of providing data to the client: We will use PHP.
  • Database to store data: To make our code as simple as possible we're going to use a file to store our data, but you can use a real database if you wish to.

Project's Principle:
The principle is simple but effective: when a user type a character in the text field, a search is done and the results are sent back to the navigator. The latter displays these results in a little frame located under the search field.We can then browse the results using the up and down arrow keys or the mouse cursor.If we choose one of the listed results, it will be automatically displayed instead of what was written by the user.

What are the requirements?

  • HTML/CSS: Basic knowledge to create a simple text field
  • PHP Basics:Things like variables, if statements, loops and arrays.
  • Javascript: We will use events and a little bit of Ajax(mainly the XMLHttpRequest object).Dont worry if you're not familiar with these two,I will do a quick introduction to them in this course

What am I going to get from this course?

  • At the end of my course, students will be able to rapidly build their own autocomplete system using HTML5,CSS3,JavaScript and PHP.This system can be used in more advanced projects like building a search engine.

What is the target audience?

  • This course is perfect for anyone who wants to learn how to create an autocomplete system from scratch





Ismail Raji

Software Engineer, Web Developer and Instructor

Ismail Raji is software engineer and web developer. He have a passion for everything related to technology and enjoy programming and geeking out.
The idea of helping others learn makes him so happy and satisfied, that's why he decided to start teaching online.
So join him now in his knowledge sharing and learning journey.

You can follow him on Twitter @RajiIjar

See full profile