How to create a search table for a website

Published on 25 Jun 2021. Written by Ipshita Soni

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. 

Read more..

SLNOTE


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!

SLLATEST

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. 

SLDYK
Kit required to develop How to create a search table for a website:

• HTML
• CSS

Technologies you will learn by working on How to create a search table for a website:

• Web Development

Any Questions?