Creating an Instant Search

Поділитися
Вставка
  • Опубліковано 18 вер 2024
  • This is an addon from the PHP search we created. This includes jquery and javascript and it creates a good like instant search effect!
    Tutor Facebook: / joethetutor
    Dibbble: www.dribbble.com/sleekode
    www.helpingdevelop.com

КОМЕНТАРІ • 134

  • @miguelvidal556
    @miguelvidal556 7 років тому

    Awesome tutorial man, don't stress the mistakes because that's what makes the video more real and organic. A big part of programming and coding is the use of problem solving.

  • @tadejristic9568
    @tadejristic9568 3 роки тому

    It is actually good if you make mistakes because it shows us how to fix them if they happen to us, great video

  • @Tendyow
    @Tendyow 10 років тому

    Nice work, perfect man!! Just forget about the typographical errors during coding, no one is perfect trust me, but finally you deliver which is the most important factor of which you had to put up the video. Weldone.

  • @wolfganggermain7175
    @wolfganggermain7175 7 років тому

    I think the typo makes the tutorial a bit more engaging.
    For advanced programmers, gives us a debug chance, for intro gives us a debug chance :)
    thank you and much love.

  • @Snaievans
    @Snaievans 8 років тому

    Another best teacher online, better than ma college teacher! thanks well explained. subscribed!

  • @pedroTheGreat01
    @pedroTheGreat01 7 років тому +1

    thanks man still working today is september 5, 2017 from Philippines ^^

  • @_jsmth
    @_jsmth  12 років тому

    Adding them to my list now, that is a series so I will do that but if people suggest anything smaller I will do them first. :) Look forward to them.

  • @hynuth1
    @hynuth1 12 років тому

    Awesome! Always wondered how to create an instant search

  • @Ralphiweezy007
    @Ralphiweezy007 10 років тому

    You're really doing a good job by teaching through these videos, they really help. I would like you to make one about a shopping cart. I mean about how to create a website that we can sell stuff on, that has a cart page.

  • @brenoalves4614
    @brenoalves4614 11 років тому

    Thanks! Your channel is very helpful!
    I'm brazilian and you helped me so much.
    Don't worry with the misspellings.
    And make more videos about AJAX and jQuery!
    Very thanks and congratulations!

  • @ZaitixGaming
    @ZaitixGaming 8 років тому +1

    Great guide! I have managed to make radio input filtering work with ur normal PHP search (without the instant search). However I can't get it to filter instantly when i click the radio button for the instant search. Thanks in advance for help!

  • @jimmyadaro
    @jimmyadaro 9 років тому +10

    Don't use "onkeydown" in the form, is better "onkeyup".

    • @redsec5880
      @redsec5880 7 років тому

      correct, because when u use onkeydown the ajax will work before the key is in the input field

  • @GregAgfa
    @GregAgfa 8 років тому

    Thanks for the tutoriial, very useful !and indeed, using keyup might be a better approach in order to avoid "hanging" input

  • @bm2ilabs
    @bm2ilabs 12 років тому

    as always impressive work Joe

  • @jack1992w
    @jack1992w 9 років тому +1

    Great! works spot on, can you tell me how i can get the search results to clear completely without refreshing the page?
    Thanks!

    • @simondscheff9093
      @simondscheff9093 9 років тому +1

      Hi
      You can add this at the end-
      if($_POST['searchVal']==NULL){
      $output ="";
      }

  • @elliotstrickland5004
    @elliotstrickland5004 9 років тому +1

    I really appreciate the video, and have gotten the search engine to work as you have instructed, however could you please address fixes to the following issues:
    1) Setting a maximum amount of results displayed
    2) Clearing the search results when a user has removed text from the input field
    3) When a user hits spacebar after a keyword, the results are no longer displayed
    Thanks for the video :)

    • @elliotstrickland5004
      @elliotstrickland5004 9 років тому +5

      For anyone interested, I found solutions to the three (numbers relate to the list created above):
      1) - Set counter variable above while loop: $n = 0;
      - Increment counter variable inside while loop: $n = $n + 1;
      - Create 'If statement' to check if the counter is below or equal to a cutoff number for displaying results, and put the 'output' declaration inside it:
      // If counter is greater than 10, stop displaying results.
      if ($n

    • @afrikanking4022
      @afrikanking4022 9 років тому

      Elliot Strickland thank you so much for your help.

    • @DrkRbn
      @DrkRbn 8 років тому

      +Elliot Strickland Thanks so much! I had the same issues when finished the tutorial so this had been very helpful

    • @jayachandra6762
      @jayachandra6762 7 років тому

      after hitting the search button the page will be reloaded and results won't be displayed....!! any fix for this???

  • @TeanRubix
    @TeanRubix 10 років тому +3

    Mate, I've got a problem…
    I made the PHP search itself, but some how it won't be instant O:
    I followed your videos step-by-step and checked my spelling.
    Hope you can help me!

  • @madhavareddy2274
    @madhavareddy2274 10 років тому

    its very good insight into search functionality. Thanks

  • @vladxoxo8128
    @vladxoxo8128 8 років тому +2

    Another great tuts! Subscribing :DDD

  • @ClassicCartoonsNL
    @ClassicCartoonsNL 7 років тому

    Great tutorial Joseph. I do have a question: For instance, you have multiple pages on your website and on each page you have also the search bar. Instant search seems to be a good choice but how do you create a page special for the results where you can see only the results? In that page you also have the search bar and the option to search and display the results on the same page. How do you do that? Can you have any idea? Can you give me a hint? I hope to hear from you soon.
    Cheers, Constantine

  • @FelixSulla1
    @FelixSulla1 9 років тому +1

    Is there any way to present these search results in a dropdown menu and have the clicked/selected result automatically written in the search bar?

  • @chowdesh1990
    @chowdesh1990 8 років тому +2

    is it possible to create a search for images .. ?? where images with a certain tag will pop up

    • @FightAndFunHub
      @FightAndFunHub 8 років тому

      +chowdeshwar b do the sam ething and in WHERE part of query write for the image tag e.g where image_tag like image_tag

  • @stunkata8
    @stunkata8 8 років тому

    Dude. Thank you! Awesome tutorial. Got my stuff done in 10 minutes. Thaanks ^___^

  • @maqboolurrahimkhan
    @maqboolurrahimkhan 11 років тому

    Owesome tutorials!!! keep it maan , :)
    Little mistakes does not matter u teached great (Y)

  • @tardodaty
    @tardodaty 7 років тому

    great job ! . i understood it easily thank you bro

  • @corynolan1136
    @corynolan1136 5 років тому

    Hi i was just wondering where I can find the lesson where you add the jquery to the Search?

  • @mukulsoni8263
    @mukulsoni8263 9 років тому

    Well that was a great tutorial.
    Now I'm requesting you to make another tutorial of giving an item a star rating which should be dynamically.
    So will you make the star rating tutorial ?

  • @jerrytab4276
    @jerrytab4276 11 років тому

    wonderful tutorial! awesome...can you make a tutorial to make the keyword bold in a search engine like google??

  • @shawncarpenter5024
    @shawncarpenter5024 8 років тому

    if I use the backspace/delete button to clear the search box it causes my entire database to show in the results field. How do you stop that?

  • @inyomangurnitha4657
    @inyomangurnitha4657 10 років тому

    Great one.....thanks

  • @MrWasimwasi
    @MrWasimwasi 8 років тому

    Very helpful thank you Sir!

  • @1marc1967
    @1marc1967 6 років тому

    Awesome! Thank you very much sir.

  • @MontSteve36
    @MontSteve36 9 років тому

    Very nice tutorial. Thank you, I think that it is going to be quite helpful.

  • @NedumEze
    @NedumEze 6 років тому

    Hi, Joe,
    That was magnificent. I see it's been a while since you published this. I wonder if you could modify the script a bit to make the search results clickable with a href pointing to the webpage where the item may be found?

    • @hanibioud
      @hanibioud 5 років тому

      Do you have already this source code? I can do it for you!

    • @ethandunn-weedon6249
      @ethandunn-weedon6249 5 років тому

      @@hanibioud hi can you help me i am currently struggling with the same problem^^

  • @anilkumar-mf4tc
    @anilkumar-mf4tc 8 років тому

    this is very helpful, thanku so much sir

  • @alamgirkhan7285
    @alamgirkhan7285 8 років тому

    Awesome Sir Thank you!

  • @afrikanking4022
    @afrikanking4022 9 років тому

    you are officially my friend all the way from Africa man if you ever come down let me know. I mean South Africa Johannesburg

  • @akulchhillar
    @akulchhillar 9 років тому

    could anyone tell me how did he echo the output variable. The video is quite blurry at that time.

  • @lucassosa1005
    @lucassosa1005 2 роки тому

    Tengo un nivel aficionado de programacion y me cuesta horrores entender que sucede en este video, me pregunto si tengo que volver a repasar lo basico, pero se me hace muy complicado entender

  • @hhypnos
    @hhypnos 8 років тому

    Hello, good lesson but i have 1 question , how to make search to find each word?
    for example: if i have "tags" column which have "quotes, size, title" , i can write 'quotes' and search engine will find it but if i write 'quotes title' , it can't

  • @tyren9
    @tyren9 12 років тому

    Blog tutorials!!! :D with jQuery post, delete and edit functions :)

  • @audriuskundrotas267
    @audriuskundrotas267 8 років тому

    Very helpful thank you!

  • @NedumEze
    @NedumEze 5 років тому

    Dear Joe,
    Please I wanna know if this search script can be adapted for searching a website fully.

  • @raulbanuelos1695
    @raulbanuelos1695 10 років тому

    how do you search with multiple text fields and multiple lists/menus. Please help.

  • @thechronic4twenty
    @thechronic4twenty 10 років тому

    Wow what a perfect tutorial

  • @georgelagardo
    @georgelagardo 10 років тому

    Thanks for the beautiful tutorial, i have a request , i need to import in realtime excel file data into mysql or sql, and in return have through html page want to display the same data, which should have option of filtering and search. data.

  • @MrMmmmms
    @MrMmmmms 9 років тому

    Hi, can you do a tutorial of how to implement a filter panel, i.e, filtering the data displayed using drop down lists.

  • @ijharansari1935
    @ijharansari1935 8 років тому

    Its wonderful. Will you please give us the tutorial so that we can visit particular page after search data are listed just like when search any member in facebook and click on link, it will take on particular person profile.

    • @mathiasfantoni2458
      @mathiasfantoni2458 7 років тому

      Inside your while loop, where you echo the $row['name'] and all, you can add this before you echo the name:
      echo "";
      …and add this after the name:
      echo "";
      If you need help, we can talk over Google Hangouts. Just ask. :-)

  • @regunat-anand
    @regunat-anand 9 років тому

    This was awesome

  • @viktorstrate
    @viktorstrate 10 років тому +1

    good quality videos

  • @xxxbirxxxx
    @xxxbirxxxx 9 років тому

    I got mine almost working! Can anybody say what it works only once when i hit some letter?? It takes the first letter and the rest ones are not working?

  • @adrien26ab
    @adrien26ab 7 років тому

    Hi man, thanks for this tutorial. I just have one question. How could I turn the name into a link. For example, you're looking for "joe smith", and now that you found him you can click on the name and open a blank page and have all the information about him.

    • @jtlewis81
      @jtlewis81 6 років тому

      this is something similar to part of a project i'm currently working on. you will need a page that loads the person's info into a table or whatever other format you like based on the $_GET['name'] variable sent to the page. then you wrap the names in the search results in an tag and set the href to send it to that info page with a "?name='$name'" at the end of the link. $name = $_POST['name']; this is the basic idea with sample variable names anyway. you could also set it up to use an id from a people database so you can use numbers in the links instead of strings. hope this helps.

  • @Worldfacts2400
    @Worldfacts2400 9 років тому

    Thanks a lot for this video :).
    Need more help !
    i want to select one of filter results and search result according to that

  • @TheSom2
    @TheSom2 10 років тому

    it's helps me a lot, . but how I add custom search box into a website? I would be greatfull to you, if you show me that...........

  • @rajeev6843
    @rajeev6843 7 років тому

    can you make a tutorial on refining/filtering search using location,price,rating,delivery time etc.

  • @CRBcam
    @CRBcam 8 років тому

    Thank you!

  • @jayachandra6762
    @jayachandra6762 7 років тому

    thanks for the instant search effect!!! I got a small doubt... what happens when you click on the search button...??? i think it won't give any results because the page will be reloaded......!!!
    Is there any solution for this...??

  • @RichardMillion
    @RichardMillion 11 років тому

    it works thank you.

  • @shawncarpenter5024
    @shawncarpenter5024 8 років тому

    narrate slower my friend. Good instruction but slow down for us. I liked this tut by the way.

  • @h3ctorjjb
    @h3ctorjjb 11 років тому

    this tutorial is awesome!!! thanks a lot but for some reason my search is not outputting spanish characters right. Myadmin is using uft8 :( any idea?

  • @_jsmth
    @_jsmth  12 років тому

    No problem man :)

  • @gorkijatt8764
    @gorkijatt8764 9 років тому +2

    anyone now, how i select the values from the search results.. and put in input ???

    • @prashaadbaliah2536
      @prashaadbaliah2536 8 років тому

      I have done with some custom codes. If you want to know, send your email id to my inbox (prashaadmail@gmail.com).

    • @gorkijatt8764
      @gorkijatt8764 8 років тому +1

      +Prashaad Baliah thnx brother but i used jquery ui autocomplete featute and it works fine for me

  • @SonicMarsEnergy
    @SonicMarsEnergy 11 років тому

    Hi, how can I display the search results on a expanding box like facebook or how can I take the search query to another page and display the results on that page?

  • @shahidulislam-ct4dz
    @shahidulislam-ct4dz 8 років тому

    You're awesome :)

  • @NexusWebDesigns
    @NexusWebDesigns 12 років тому

    I already miss your old intro....

  • @davidborg5479
    @davidborg5479 10 років тому

    Its probably simple but I haven't got my mind around it yet, how would you turn the outputs into separate dedicated links? Will sub to anyone who has a solution. Thanks

  • @beninegoita
    @beninegoita 7 років тому

    Hi, are you still up for making tutorials on request?

  • @randomunknown0
    @randomunknown0 8 років тому

    to stop html elements inputting in our search box, use the following code>> htmlentities($_POST['search']);

  • @VikramAhuja
    @VikramAhuja 11 років тому

    can you telll how to highlight the searched letters??
    thanks in advance

  • @manjunathjoshi6182
    @manjunathjoshi6182 9 років тому

    how do I get search results without using submit button and instead get results by hitting return key!

    • @FlyingUnosaur
      @FlyingUnosaur 9 років тому

      *****
      try that:
      $("#text_input").on('keyup', function(e){
      if(e.keyCode == 13) { //13 means enter key
      //do stuff
      }
      });

  • @seleniumtesting1972
    @seleniumtesting1972 6 років тому

    My Searching has Duplicates, how can I fix?

  • @UnitedYachtSalesHQ
    @UnitedYachtSalesHQ 10 років тому

    Does anyone know how to add a minlength so the box doesn't begin to search until two letters have been entered?

    • @dinoudischris
      @dinoudischris 10 років тому

      if(strlen($searchq)>2|)
      {
      echo "
      something like this i am not sure
      ";
      }

    • @UnitedYachtSalesHQ
      @UnitedYachtSalesHQ 10 років тому

      Chris Dinoudis Thanks amigo, but there should be a way to limit it from starting the search so you don't waste hits to the mysql server. I saw it in another tutorial, but can't for the life of me find it lol

    • @2010gamerguy
      @2010gamerguy 10 років тому

      Sorry, but where would I add this piece of code in order to use it? Thanks

    • @UnitedYachtSalesHQ
      @UnitedYachtSalesHQ 10 років тому

      Josh Littlewood can you elaborate a bit on your question. do you mean the over all project?

    • @2010gamerguy
      @2010gamerguy 10 років тому

      UnitedYacht Sales Yes, In which section of the tutorials code would i place this?

  • @hellobaby8306
    @hellobaby8306 7 років тому

    thanks sir ji

  • @OrmandoNeto
    @OrmandoNeto 8 років тому

    thanks

  • @xemuz
    @xemuz 4 роки тому

    Nice ty

  • @bahez11
    @bahez11 8 років тому

    thanks and i subscribe

  • @Worldfacts2400
    @Worldfacts2400 9 років тому

    i have urgently need this code, please reply me .
    thanks

  • @FightAndFunHub
    @FightAndFunHub 8 років тому

    kindly make a series on ecommerce in php

  • @nehakapoor3891
    @nehakapoor3891 8 років тому

    very nice sir....i want the code for creating otp and sending it to email and mobile number varification...i hope u can help me :)

  • @psysci
    @psysci 9 років тому

    When I hit the submit button or enter the page goes blank.
    How do I fix this?

    • @FlyingUnosaur
      @FlyingUnosaur 9 років тому

      psysci add return false;

    • @jayachandra6762
      @jayachandra6762 7 років тому

      where?? and can you please give the piece of code where to add it??

  • @a.pcreation8368
    @a.pcreation8368 6 років тому

    Do you have this codes?

  • @raikhanuzgenbayeva5943
    @raikhanuzgenbayeva5943 8 років тому

    How can we use this code in wordpress?)

  • @billybobbeh
    @billybobbeh 11 років тому

    To fix these problems, change the onKeyDown to onKeyUp.

  • @philiolioso
    @philiolioso 11 років тому

    O NO A SPELLING MISTAKE. lol thnx man :)))))

  • @enel1221
    @enel1221 9 років тому

    Anyone else notice Joe smith showing up when he searched ma ....lol

    • @DeadlyEnough
      @DeadlyEnough 9 років тому

      enel1221 that was a result of the code displayed here, why it acts this way, I'm not too sure, but I only recently watched it, so I'll try to figure something out, anyhow, the letter it was searching for was m, not b, because it hadn't been registered yet, or something like that
      The way it is now, it needs a trigger button push, and I've tried several, even the ALT and ESC works to accomplish this feat..

    • @MiguelPerry
      @MiguelPerry 9 років тому +1

      enel1221 That's because he's using "onkeydow" instead of "onkeyup". It only considers "m" and not "ma"

    • @DeadlyEnough
      @DeadlyEnough 9 років тому

      Miguel Perry
      How would you suggest we'd fix it?

    • @DeadlyEnough
      @DeadlyEnough 9 років тому +1

      Nevermind, found out how >__<
      Replacing them .-.

    • @DeadlyEnough
      @DeadlyEnough 9 років тому

      btw Miguel, I've been trying to select the $output variable and put in into an echo, meaning I'll be able to click directly on the Dropdown, and be directed to the page and its content, I have a variable, $Dname, which stands for Item_description and is a variable, a text, which I want to print out when clicking directly onto the link, using only a few php files, and not too many. Any ideas on how to solve that?
      If you have any ideas, I'd be very, very thankful! c:

  • @joaotavs6317
    @joaotavs6317 10 років тому

    Even though it is a very simple search engine, it is pretty poor. I don't recommend doing it on any kind of website.
    It is pretty inefficient, for example, if you type in a single character, nothing will change. You will actually need to type a spacebar after that to get the results.
    And there is a lot of more problems with that search bar.
    Another one is that if you clear you text input, you will actually need another backspace to actually see all the selected table variables.
    Good tutorial but not efficient and worth search engine.

    • @MERhma
      @MERhma 10 років тому +1

      it's just an idea bro ,, you need to put your touch on it ,, you can't just put your ass down and find everything good or work well ,, you have to take the idea and make your own based on what you want ,,

  • @kurtdelarosa733
    @kurtdelarosa733 10 років тому

    is there anyone here know how to show the profile or data after searching the name?? help me please for my project

    • @JJmaster08
      @JJmaster08 10 років тому

      have you found the answer to this? i also would like to know, thanks

    • @TeanRubix
      @TeanRubix 10 років тому

      Peter James Medalla and Kurt Dela Rosa, I guess I can help?
      But I need a bit more information about what excacly you want. :)

  • @tyren9
    @tyren9 12 років тому

    Then just do jQuery/AJAX post, delete, edit :)

  • @ThomasOrlita
    @ThomasOrlita 9 років тому

    doesn't work :(

  • @stylishhughes
    @stylishhughes 11 років тому

    noticed the following errors
    1. search result still populates after user clears out the results
    2. after hitting space bar without typing the search query begins
    REQUEST
    can you make a search page that filters based on parameters which are links. thanks

  • @22MrLyricmaster22
    @22MrLyricmaster22 9 років тому

    Helping Develop
    Anyone that could give me the whole DB file, and PHP file? Please. :)

  • @TrivediKavit
    @TrivediKavit 11 років тому

    +1

  • @RichardMillion
    @RichardMillion 11 років тому

    +1000000000.. ∞

  • @salmankhansong
    @salmankhansong 10 років тому

    thanks