How to Build an Autocomplete System Like Google
4.8 (5 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
261 students enrolled
Wishlisted Wishlist

Please confirm that you want to add How to Build an Autocomplete System Like Google to your Wishlist.

Add to Wishlist

How to Build an Autocomplete System Like Google

Step by step guide to create an autocomplete system from scratch using JavaScript and PHP
4.8 (5 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
261 students enrolled
Created by Ismail Raji
Last updated 10/2016
English
Current price: $12 Original price: $30 Discount: 60% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • 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.
View Curriculum
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
Description

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.

Who is the target audience?
  • This course is perfect for anyone who wants to learn how to create an autocomplete system from scratch
Compare to Other Web Development Courses
Curriculum For This Course
+
Coding the server script
1 Lecture 06:46

In this lecture we will deal with PHP server-script and define how our server will receive the search keywords.

Anlayzing and returning data
06:46
+
Preparing The Field
1 Lecture 07:55

In this lecture we will create our interface using HTML, then we will add some css to it in order to make more presentable.

Creating the interface
07:55
+
Managing The Events
2 Lectures 13:01

In this lecure we will use JavaScript to create our events and manage the interactions between the user and the list of results.

The Keyup Event Part1
07:51

In this lecture we will continue with creating our events using JavaScript.

The Keyup Event Part2
05:10
+
Declaring The Functions
2 Lectures 19:19

In this lecture we will declare the getResults and displayResults Functions that will help us manage the requests and display the results .

getResults & displayResults Functions
11:00

In this lecture we will deal with chooseResult function ,but before that we will add some css style to our system.

Preview 08:19
+
Conclusion
1 Lecture 00:23
About the Instructor
Ismail Raji
4.8 Average rating
5 Reviews
261 Students
1 Course
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.