jQuery autocomplete tutorial with PHP and MySQL

Geplaatst op 1 februari 2014 door Gerdt Brouwer

28 reacties

My goal was to make an autocomplete on a site that passed also another value as the selected to the new page.
I started with the documentation of jQuery but there was not much on the topic, so I started to Google to find out that it was hard to find the solution but a lot of people were looking for it.
Thanks to combining the blogs of Christos Pontikis and AF Design I came to my solution.

So, I wanted to create a autcomplete on customername and when a name is selected it should give the customercode to the next page and not the name.
I have a MySQL database with a table called Customer with several fields but the important ones are :

For the HTML I used a simple inputfield (which can be in a form) :

Using jQuery autocomplete one combines the autocomplete to the inputfield so at the page is a piece of Javascript.
For this I inserted the jQuery scripts that you can find here.

Time to add a small piece of Javascript to the page

What it does is adding the autocomplete functionality to the field customerAutocomplete. After typing at least 2 characters the script will send the entered value to the source, in this case suggest_name.php
For this jQuery uses automatically the variable term, leading to a url like suggest_name.php?term=AB
Knowing this I wrote the PHP page suggest_name.php

What it does is reading the table Customer at line 14 looking for the string term in the first- or lastname.
The results are added to a multidimensional array. When using a single array it would only return the value to have a autocomplete.
The label is now used to send for instance extra html like Chris did in his example. I just kept it equal.
The code is returned as well as you can see at line 19.

Now that I have the values I need, I need to expand my script a little.
I have to add the behaviour when one selects a name which is now done at line 5 and I redirect the user to the invoice page with the correct customercode.

This should do the trick. (and ofcourse you can send more parameters when needed)

I know the PHP is doing what it should but making it a little more safe is a wise thing to do.
Therefor my suggest_name.php looks like :

Gepost in categorie: TechTalk

Reacties

Plaats reactie zonder facebook account

Anoniem

  1. naveen naveen

    Thank you very much for this..

  2. sumit sumit
  3. Juniorprogrammer Juniorprogrammer

    Code is way 2 long, can be done shorter, atleast 50% less.

    And btw: the facebook plugin is blocking this form

  4. Jonathan Jonathan

    Hello, great information, I have just one question, I need to do the same as your code, but I need to put in the autocomplete like the option in php form, example:

    I am working in a form to quote hotels, I need autocomplete to the hotel list, but every hotel have a “value” I need to show the name of the hotel in the autocomplete but send the “value” to my 2nd page of results in php, can you help me?? is like the select in php forms with option:

    Hotel Name

    I need that but with autocomplete.

    I hope you can help me.

    Thank you for your support.

  5. Victor Victor

    Thank you very much,
    it’s very helpfull

  6. ali ali
  7. 9 Best jQuery Autocomplete Tutorials | Design Posts 9 Best jQuery Autocomplete Tutorials | Design Posts

    […] jQuery autocomplete tutorial […]

  8. Jewel Jewel

    Thanks ! great work………………..

  9. Siegfried Siegfried
  10. Gerdt Brouwer Gerdt Brouwer

    @Siegfried : read .. before you write
    Thanks to combining the blogs of Christos Pontikis and AF Design I came to my solution.

  11. Jam Tangan Murah Jam Tangan Murah

    thanks for the tutorial, now i can make my own autocomplete search fitur easily, thanks

  12. Mobil Tv Mobil Tv

    Thanks for the tutorial, now i need this. Thanks!

  13. Shahariar Shahariar

    Where i get the jquery.ui.autocomplete.html.js file. please upload it.

  14. Grosir Baju Couple Grosir Baju Couple

    thanks for the tutorial, now i can make my own autocomplete search fitur easily, thanks

  15. Mayur Mayur

    the autocomplete div is appearing exactly at the left top corner of chrome.

  16. jam couple jam couple

    really great posting, thank you guy

  17. Grosir Batik Murah Grosir Batik Murah

    Nice post it works. Thank you

  18. omega omega

    friends i want to first box autocomplete but fill all value from data base related to first box.
    please help me code (ajax, jquery, php)

  19. Williammop Williammop

    Hey there! Do you know if they make any plugins to Villamar

  20. Grosir Herbal Terlengkap Grosir Herbal Terlengkap

    thanks you bro

  21. Pusat Jam KW Super Pusat Jam KW Super

    Sentra perdagangan jam tangan kw super branded di indonesia

  22. tojihi tojihi

    thanks for the tutorial… tnx for this post. but i have a question. is it possible a web page form auto complate

  23. Karen Karen

    Thank you! 😀

  24. hina azimi hina azimi

    wow great tutorial thank you also also use in http://www.livecricketscorer.com website thank you for help

  25. hinaali hinaali

    the thing i was looking for thank you woww https://www.subkuchsell.com

  26. Aarav Aarav

    very nice script, i am currently using the same on my website https://pnrstatus.com/

  27. Naiam Naiam

    very good thank you!

  28. Bubu Bubu

    Thanks you!!!!