Need help with a File Search Bar

Question

My webmaster teacher has quite recently wanted us to make a homepage for when we finish making a webpage design he has shown us. So far it's just an ordered list, but I want to do more than just that. I want to make a file search similar to Google Drive. Sadly trying to read their source code is near impossible. If someone could explain in what tag I should put the links and how to make the Link pop up as I type that'd be great, thanks.
https://code.sololearn.com/WG8MAylO8NmW/?ref=app

Answer 1

Hi Christopher,

Ok what you are asking for is a little more than HTML. Have you used javascript before?

Correct me if I'm wrong but you are asking, can i have a list of say 200 items, and a search bar to search and display results similar to the search term from the list?

If thats the case then you can use Javascript todo this. See my code I've just written out for you.
https://code.sololearn.com/WmzN0JwMcZ5N/#html

Answer 2

The links in the code are dead btw, so no need to click on them

Answer 3

Also just seen you keyword this question with PHP. This is also pretty simple and you can use Javascript and Ajax to handle the request for you.

You will have a DB class for connecting to the database

You will have a php class for selecting data from a table like the below code.
WHERE FirstName LIKE '%" . $name . "%' OR LastName LIKE '%" . $name ."%'

You will then use ajax to listen for the search button click or return key press which will then run the php class for selecting where the search term is LIKE first name or last name etc. This will then return the result back to the page using ajax.

This way it allows you to create a smoother flow for the user without taking them away from the page they are on. Querying and Echoing all results from the same page.

The power of Javascript, Jquery, Ajax!

Answer 4

@ihateonions
Thanks man!
I think I can understand what you did there.
I even documented what I saw happen at the bottom of this code:
https://code.sololearn.com/WWDF87mNflsk/#html

I also made a way to show that there were no matches in the results using jQuery.
Mind checking to see if my documentation was correct?
I'm documenting it in case if I need it for future reference.