![Search js](https://cdn1.cdnme.se/5447227/9-3/2_64e61dfa9606ee7f98e9879b.png)
You should define the list variable manually. So our array is going to be called "people". For today's example, our data is going to be people's names. I like to create data using JavaScript nested arrays. Since we are not referencing an API, as this is a simple project, we are going to create some simple data to be rendered onto the page as search results. So, our HTML file is set: let's continue onto our JavaScript file. Our browser should look something like this: The same idea goes for the "clear" button. The text between the button tags will showcase "search" on the button in the browser. I then created a "submit" button with a type of "submit" this button also has a class name.
![search js search js](https://i0.wp.com/onaircode.com/wp-content/uploads/2020/02/JS-Search-Wikipedia-With-Rotating-Button.jpg)
![search js search js](https://cdn.educba.com/academy/wp-content/uploads/2020/10/JavaScript-search-1.jpg)
I also provided a class name, id and a placeholder. This allows the user to type inside the input form. I created an input tag with a type of "text". Within our form container, I created a form element. Then, we have another div called "results-container", this will hold our results. So, our form container contains the form and the adjacent buttons. We want our different sections, that have specific roles, to be nested in their own containers. Make sure the class names or id names reflect what the element is doing or providing.įrom outside-in, I created a div element called "form-container" this is a regular standard in JavaScript. With each element, provide a "class" name and/or "id". You can create these files directly in your code editor(by right clicking and choosing "new file" or using the new file button) or in your terminal:Įnter fullscreen mode Exit fullscreen mode We have one (1) HTML file which will hold our DOM elements and portray our code in a visible format onto the web page.Īnd we have one (1) CSS file which we will use to style our HTML elements and add some flair + creativity. We have one (1) JavaScript file which will hold our event listeners, functions, variable declarations + assignments, and our basic data. But for today's needs, we will only need three (3) files: You may want to add and embellish this as you want.
![search js search js](https://i.ytimg.com/vi/92e5Ih4Chbk/maxresdefault.jpg)
Now that we have a clear outline of what we need to achieve. Building out the Basics of the HTML File.This mini project will also utilize CSS and HTML. Today, we will be walking through how to build a functional, yet very simple search bar in JavaScript.
![Search js](https://cdn1.cdnme.se/5447227/9-3/2_64e61dfa9606ee7f98e9879b.png)