In order to implement search autosuggest, learn how to send the Ajax request and how to have Ajax send the data after every keystroke but only after the text input is more than three characters long.
- View Offline
- Exercise Files
- [Narrator] In this movie,…we will write code to send Ajax requests…as the user is typing in the text input field.…The idea is that as the user is typing in the field,…we want to fire this get suggestions function…so that it goes and it gets the suggestions…from autosuggest.php which it gets back as JSON…which it then populates that list with,…but it all starts with get suggestions.…So we need to have an event listener…that's going to call get suggestions.…So let's uncomment that line.…We want to tell the search input,…we already figured out what that was up here…with get element by ID search,…we want to tell it to add an event listener.…
We know that we wanted to call get suggestions.…False is actually an optional option.…It's actually the default so we can take it out,…but what do we want to bind this to?…What's going to be the action that we want to look for?…It's not going to be a click like it was when we had a button…or when we had a form…and it's not a scroll even like we had before.…There are two possibilities for what we could use here.…
- What is Ajax?
- Creating Ajax requests and responses
- Monitoring Ajax request state and events
- Responding to Ajax requests with HTML and JSON
- Building Ajax buttons
- Submitting forms with Ajax
- Implementing infinite scrolling
- Adding autosuggestions to text fields
Skill Level Intermediate
1. Ajax Defined
What is Ajax?5m 34s
2. Ajax Client
3. PHP Server
4. Ajax Button
5. Ajax Form Submission
6. Infinite Scrolling
7. Search Autosuggest
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.