jQuery Tutorial: jQuery Autocomplete With Ajax & PHP & MySQL

In this jQuery Tutorial, you will learn How To Create jQuery AutoComplete.

It is jQuery Tutorial For Beginners.

In this tutorial I will talk about:
- how to create an HTML form (search box)
- how to set KeyUp event on Search Box
- how to use jQuery & ajax to send data to PHP
- how to use PHP to find matching data inside MySQL Database
- how to put all things together and create jQuery AutoComplete

This tutorial will cover all basics that you need to understand. Please watch the video above to learn all about jQuery AutoComplete.

[santiagopotes]

That's just what i need, so lucky that i founded your video. thank you

[ericcastro]

Congratulations, Friend! Very easy, using few lines of code, using only one file with all the code, jQurey and PHP. Greetings from Costa Rica.

[mr.myriad]

I really appreciate your thorough explanation of the technologies used. Well done.

[SirajummuneerParvez]

Yours is one of the best and well described tutorials on this topic. May god bless you!

[kazzmi]

I really like the way you explain things. You are a great developer. Great Work.

[masonwang]

E care engleski pricas odlicno legenda si 😄 ali vrlo zanimljivo i lako objasnjen tutorial! Hvala puno. Pozdrav iz svicarske

[burningferriswheel]

You are really putting great efforts in your video. Keep going.

[mdtanveeralamgir]

Thanks for the video. But can't figure out an issue. I am using mod_reroute to route through index.php. Whenever I submit the page in response I get the whole HTML on console (video time: 14:27). Any suggestion would be appreciated.

[thomaswerkhoven]

He thank you for the tutorial you are really helping me out. I have one question. How can i make the list disappear after i backspaced al the characters from the input field. Because it keep displaying the search results

[Julies_channel]

How can I make this search case insensitive?

[soumyaappugouda]

Hii Senaid, wonderful tuts, Thank you & love from India, You earned me as ua new subscriber :)

[cj]

Pleasure seeing the tutorials. Thank you

[janisstrazdins]

Perfect!!! I got this one! Just started to learn to code and barely started to understand things and ajax. Much better than using already made ui...actually i just didn't got them to work :D ... and i didn't like to idea adding all those unknown css and js except jquery.
P.S. probably will need to add overlap for ul because there will not be just one search box...anyway....EXCELENT!

[aronsb]

Just what I was looking for... thanks!

[jaiganesh]

i made two search boxes, facing problem as once i select in one input box the other gets filled too.

[xMario]

the boss, love you from tunsia

keep going

[Grimba]

I got the query length statement working with this syntax:

if ((query).length > 2) {
console.log(query);

}

Notice the round brackets around the variable, it seems the syntax has changed a little since this video was posted and you should probably update these lines. Anyway, thanks a ton for the video, I'm starting to get into JS and web development and such videos are a goldmine for learning fundamentals.

[daffapradana]

Thank you very much, hope to see more tutorials for you! Love from Indonesia!

[WallyJK]

When I get to the step that includes "console.loq(query);" I get "undefined" in the console every time I hit a key in the searchBox. Why is that? Thanks!

[cwazybrad]

Thanks so much for this tutorial, very easy to follow and understand. Is there any chance you could provide some more information on how to pass the value in a GET or POST request so I can use it on another page to retrieve the data?