How to create a search table for a website

Today most of our daily work counter websites and browsing through them for any information we need. For the same purpose, you must have most commonly seen the search table where there is a table full of data and then you type some key in the search bar to get what you want. It is really common on websites today and easy peasy when tried making. Here, we will not use tools like jQuery. In this web development project, we will create a simple search table made with HTML and JavaScript. 

Looking to build projects on Web Development?:

Web Development Kit will be shipped to you and you can learn and build using tutorials. You can start for free today!

Let us suppose that the search table is for an institution and it contains all the student’s data of a particular college. Then, the table will contain information such as the student’s name, roll number, class, and contact. The search table will have a search bar and therefore the search result will display the matching information. Take an example, your table contains information of students named Ankit, Barun, Chetan, David, Khush, and Rakesh. If the user types ‘a’ then the search result will display the information of Ankit, Barun, David, and Rakesh only. If the user further types ‘an’ then the search result will display information of Ankit and Chetan. I think you got what I tried explaining now. So, let us get started!

1. Open your text editor and make a file with an HTML extension. 
2. You will have to make a table in this code in which you want the data to be searched. Supposing that the website is for an institution therefore the table will contain names, roll numbers, class, and contact. Hence the search will be done with the help of a student’s name. 
3. You can start making the table by using the table tag and then add headings with the table heading tag. Now to make the rows of the table use the table row tag by HTML. Once done with making the rows you can enter the table data with the table data tag. Also, add a tag for the heading of the table like the “Students list”.
4. Next, make a search bar where the user will enter the words to search the data. You can make this search bar by creating an input field in your HTML code. You can assign something like “type your search here” to the placeholder option.
5. Now there is an event in HTML known as onkeyup, you can use this event to execute the JS when the user releases the key. Make a function with the help of JavaScript and call it here in this event.
6. The function will be the most important part of the program. Here you will define variables, store and fetch data, and write your logic. 
7. Try to build the function in such a way that the typed data from the search bar is fetched, and then matched with the table data. The searching data is then displayed on the screen and hence your search table will be ready. 
8. This can be done by first fetching taking the user data and converting it to uppercase. Then, go to the table then the table row, and then to the table data and store it in a variable. Loop through the table to get access to each row and then use an if condition to match the user’s search and the table’s data.
9. If both of them match then display the whole row on the screen.
10. If none of the rows match the user’s search then do not display any row on the screen. Code ‘none’ for this case. 

Did you know

Skyfi Labs helps students learn practical skills by building real-world projects.

You can enrol with friends and receive kits at your doorstep

You can learn from experts, build working projects, showcase skills to the world and grab the best jobs.
Get started today!

• HTML
• CSS

• Web Development

How to create a search table for a website