Creating an Instant Search
HTML-код
- Опубликовано: 10 сен 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
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.
It is actually good if you make mistakes because it shows us how to fix them if they happen to us, great video
thanks man still working today is september 5, 2017 from Philippines ^^
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.
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.
Another best teacher online, better than ma college teacher! thanks well explained. subscribed!
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?
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?
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.
could anyone tell me how did he echo the output variable. The video is quite blurry at that time.
Awesome! Always wondered how to create an instant search
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!
I got
same problem
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?
how do you search with multiple text fields and multiple lists/menus. Please help.
Don't use "onkeydown" in the form, is better "onkeyup".
correct, because when u use onkeydown the ajax will work before the key is in the input field
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.
Hi i was just wondering where I can find the lesson where you add the jquery to the Search?
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
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!
Dear Joe,
Please I wanna know if this search script can be adapted for searching a website fully.
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
is it possible to create a search for images .. ?? where images with a certain tag will pop up
+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
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...........
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!
Thanks for the tutoriial, very useful !and indeed, using keyup might be a better approach in order to avoid "hanging" input
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...??
its very good insight into search functionality. Thanks
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
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
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.
i have urgently need this code, please reply me .
thanks
My Searching has Duplicates, how can I fix?
Great! works spot on, can you tell me how i can get the search results to clear completely without refreshing the page?
Thanks!
Hi
You can add this at the end-
if($_POST['searchVal']==NULL){
$output ="";
}
as always impressive work Joe
how do I get search results without using submit button and instead get results by hitting return key!
*****
try that:
$("#text_input").on('keyup', function(e){
if(e.keyCode == 13) { //13 means enter key
//do stuff
}
});
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?
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 :)
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
Elliot Strickland thank you so much for your help.
+Elliot Strickland Thanks so much! I had the same issues when finished the tutorial so this had been very helpful
after hitting the search button the page will be reloaded and results won't be displayed....!! any fix for this???
Hi, can you do a tutorial of how to implement a filter panel, i.e, filtering the data displayed using drop down lists.
Dude. Thank you! Awesome tutorial. Got my stuff done in 10 minutes. Thaanks ^___^
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?
Great one.....thanks
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.
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.
great job ! . i understood it easily thank you bro
Awesome! Thank you very much sir.
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 ?
Very nice tutorial. Thank you, I think that it is going to be quite helpful.
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.
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. :-)
Hi, are you still up for making tutorials on request?
this is very helpful, thanku so much sir
Owesome tutorials!!! keep it maan , :)
Little mistakes does not matter u teached great (Y)
can you make a tutorial on refining/filtering search using location,price,rating,delivery time etc.
wonderful tutorial! awesome...can you make a tutorial to make the keyword bold in a search engine like google??
Thanks a lot for this video :).
Need more help !
i want to select one of filter results and search result according to that
Another great tuts! Subscribing :DDD
Very helpful thank you Sir!
anyone now, how i select the values from the search results.. and put in input ???
I have done with some custom codes. If you want to know, send your email id to my inbox (prashaadmail@gmail.com).
+Prashaad Baliah thnx brother but i used jquery ui autocomplete featute and it works fine for me
Very helpful thank you!
Awesome Sir Thank you!
Does anyone know how to add a minlength so the box doesn't begin to search until two letters have been entered?
if(strlen($searchq)>2|)
{
echo "
something like this i am not sure
";
}
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
Sorry, but where would I add this piece of code in order to use it? Thanks
Josh Littlewood can you elaborate a bit on your question. do you mean the over all project?
UnitedYacht Sales Yes, In which section of the tutorials code would i place this?
When I hit the submit button or enter the page goes blank.
How do I fix this?
psysci add return false;
where?? and can you please give the piece of code where to add it??
How can we use this code in wordpress?)
can you telll how to highlight the searched letters??
thanks in advance
it works thank you.
you are officially my friend all the way from Africa man if you ever come down let me know. I mean South Africa Johannesburg
Wow what a perfect tutorial
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?
Do you have already this source code? I can do it for you!
@@hanibioud hi can you help me i am currently struggling with the same problem^^
Thank you!
Do you have this codes?
This was awesome
is there anyone here know how to show the profile or data after searching the name?? help me please for my project
have you found the answer to this? i also would like to know, thanks
Peter James Medalla and Kurt Dela Rosa, I guess I can help?
But I need a bit more information about what excacly you want. :)
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 :)
narrate slower my friend. Good instruction but slow down for us. I liked this tut by the way.
thanks and i subscribe
Blog tutorials!!! :D with jQuery post, delete and edit functions :)
No problem man :)
thanks
good quality videos
Nice ty
You're awesome :)
I already miss your old intro....
to stop html elements inputting in our search box, use the following code>> htmlentities($_POST['search']);
doesn't work :(
thanks sir ji
kindly make a series on ecommerce in php
Helping Develop
Anyone that could give me the whole DB file, and PHP file? Please. :)
To fix these problems, change the onKeyDown to onKeyUp.
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.
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 ,,
O NO A SPELLING MISTAKE. lol thnx man :)))))
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
Then just do jQuery/AJAX post, delete, edit :)
Anyone else notice Joe smith showing up when he searched ma ....lol
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..
enel1221 That's because he's using "onkeydow" instead of "onkeyup". It only considers "m" and not "ma"
Miguel Perry
How would you suggest we'd fix it?
Nevermind, found out how >__<
Replacing them .-.
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:
+1
+1000000000.. ∞
thanks