The code to create a Search/Filter Data with Javascript or html from html page.

Solutions

Expert Solution

We use filter() method of an array to filter elements of the array

The filter() method creates an array filled with all array elements that pass a test (provided as a function).

And to search element in the array we use find() method

The find() method returns the value of the first element in an array that pass a test (provided as a function).

Here is the basic use of find and filter methods.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Filter</title>
</head>
<body>
    
    <h3>Filter</h3> <br>
    <input type="radio" name="filterItem" value="all" onclick="filterFunc('all')">All <br>
    <input type="radio" name="filterItem" value="even" onclick="filterFunc('even')">Even <br>
    <input type="radio" name="filterItem" value="odd" onclick="filterFunc('odd')">Odd <br>
    <input type="radio" name="filterItem" value="divBy3" onclick="filterFunc('divBy3')">Divisible by 3 <br>
    
    <h3>Items</h3>
    <div id="filterOutput">

    </div>

    <h3>Search</h3>
    <input type="search" name="search" placeholder="Search" value="" id="searchList" onkeyup="searchFunc(document.getElementById('searchList').value)">
    <div id="searchOutput">

    </div>    
    <script>

        var mylist=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
        
        
        //A simple function to display the List on the Html page
        function viewList(dispList){
            document.getElementById('filterOutput').innerHTML="";
            dispList.forEach(x => {
            document.getElementById('filterOutput').innerHTML+=x+"<br>";
            });
        }


        // Just using the list of no from 1 to 15 and filtering numbers in list as even , odd or div by 3
        viewList(mylist);
        function filterFunc(option){
            switch(option){
                case 'all':{viewList(mylist);break;}

                case 'even': {
                    viewList(mylist.filter(i=>{
                        return i%2==0;
                    }));
                    break;
                }
                case 'odd': {
                    viewList(mylist.filter(i=>{
                        return i%2!=0;
                    }));
                    break;
                }
                case 'divBy3': {
                    viewList(mylist.filter(i=>{
                        return i%3==0;
                    }));
                    break;
                }
                
            }
        }

        //Displays Found if the no entered is in the list  
        function searchFunc(s){
            s=parseInt(s);
            result=mylist.find((i)=>{
                return i==s;
            });  
            if(result){
                document.getElementById("searchOutput").innerHTML='Found';  
            }
            else{
                document.getElementById("searchOutput").innerHTML='Not Found';  
            }
        }
   </script>
</body>
</html>

venereology answered 1 year ago

Next > < Previous

Related Solutions

2. The HTML document on the following page consists of JavaScript code executed when the document...

2. The HTML document on the following page consists of JavaScript code executed when the document is loaded. It prompts the user for his/her name (first and last names) then outputs the greeting “Hello Mr. _____!” or “Hello Ms. _____!” (where _____ is the user’s last name) depending on whether the first name is recognized as a male name. (In the code, only three male names are checked; a realistic program would check many more names.) We allow for the...

(a) Create a HTML page for a single faceted search selector. It will include the name...

(a) Create a HTML page for a single faceted search selector. It will include the name of the facet and a list of radio buttons or tick boxes for each category. (b) Add a button called filter. When the button is clicked the radio button or tick boxes will be read to determine if a selection has been made. The selection will be written to a div element located under the filterbutton. If no selection was made, then an appropriate...

Please provide HTML code for the following: - Create a page that lists a set of...

Please provide HTML code for the following: - Create a page that lists a set of audio files and shows their duration - Create a page that lists a set of video files and plays a different video when you click on the play icon

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window. c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...

I already have a database in phpMyAdmin and need to create an html/php "SEARCH" page to...

I already have a database in phpMyAdmin and need to create an html/php "SEARCH" page to retrieve the information from the database on to my localhost. Please post a php/html code that will create a search page and return the data from my phpmyadmin database. The 3 items I have on the database are first_name, last_name and birth_day.

Html code of Doctors info page

Make sure it works on jsfiddle and keep the code seperate html: css: javascript: -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Make sure it works on jsfiddle and keep the code seperate html: css: javascript: ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Assignment You should already have some experience with jQuery and some simple experience with JSON (from charting). In this assignment we will be creating some JSON data, parsing it, and displaying it. Step 1 – If you are not familiar with JSON you should complete the JSON tutorial at w3schools Step 2- You will now create a JSON file to represent some data of your...

Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to...

Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to write an html file (P5.html) that uses JavaScript program to create a Blackjack game. 1. Blackjack Games Rules: a. The object of the game is to "beat the dealer", which can be done in a number of ways: • Get 21 points on your first two cards (called a blackjack), without a dealer blackjack; • Reach a final score higher than the dealer without...

For this assignment you need to create a ToDo list using Javascript, along with HTML and...

For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link in CSS from a...

For this assignment you need to create a ToDo list using Javascript, along with HTML and...

Subjects