Working search bar

Hi
I am making a website like movie catalog. I already have a searchbar that suggest title by checking titles from database. Now I want to make it open a page for searched movie.
I was looking around the internet how to do that and havent found anything yet.
I hope someone can tell me how to do that or just give me some hints where to look.

Thanks in advance

That would depend on how you have written the app.

  • Is it plain JS or a library/framework?

  • Do you mean when you click the search button or hit Enter that it should open a new page with the result on it?

Yes, I want to open page for the movie by pressing enter or button. I am not sure how to connect the text in the input with opening specific page.

Again, it is in plain JavaScript or what?

Presumably, you would want to store the search result somewhere you can get to it from a new page. Or don’t use an actual new page but just update the DOM content of the current page. If you need storage one option is to use the build-in localStorage.

Searchbar suggestions works on jQuery

There is really too much implementation detail missing for me to give you any advice.

Do you have a GitHub repo with the code?

No, I don’t have GitHub. I have all the movie info in data base. I was hoping that i can make search button open new page that will be filled with data from database based on the title that was in the search bar. I made a single page for all movies, but i have no idea how to connect it to database so it will fetch different data based on title in the searchbar.

It’s possible to do what you want. But I need to see the code to have any chance of giving you a proper answer, as I have no idea how anything is implemented.

  1. What is the database?

  2. How are you fetching the data?

  3. How is the search bar implemented? How can it suggest a title by checking titles from the database if you don’t know how to fetch data from the database?

  4. How do you plan to update the page with the data from the database?

Make a Github account if you don’t have one, create a new repository, upload the code and link to it here.

1.As database I am using MySql.
2.Now I can fetch data with PHP.
3. https://github.com/Szlarg/searchbar.git - that’s how my searchbar works
4. That’s my problem, I don’t know how to do that.

I’m not at all a SQL/PHP guy so I don’t think I should be giving you advice on this. I also have no idea what the database looks like. I’m guessing the code wouldn’t be that much different from what you have now but instead of just getting the title you would get the different content, loop it, and add the data to the DOM using JS/jQuery.

Even if I did feel comfortable helping you (which I don’t) I would still need to see more of the implementation and need to know what the database looks like.

But if you really do not know how to use the tools you are using you should learn them. Do not just google for code and copy/paste it blindly. It will not help you in the long run.
https://www.youtube.com/results?search_query=MySQL+PHP

https://www.php.net/manual/en/set.mysqlinfo.php
https://dev.mysql.com/doc/apis-php/en/

I just wanted to know how search engins on sites work or what programing language should I use, another youtube tutoriall wont solve my problem, but still thanks for reply’s.

Did you check the typeahead.js docs? That is what you are using for the search suggestions.

Can’t you just query the input element after the user selects something from the search suggestion list? Then do a lookup in the database using that search term. After you get the data back you now have to use the data. I can’t explain how to do DOM manipulation in a forum thread, you will have to learn that on your own. I’m happy to help you if you get stuck, but I can’t possibly teach you how to construct the page, especially not in relation to data I don’t know anything about.

1 Like

This replay actualy helps me. I will check it. Thank you.