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

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

(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...

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...

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

use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...

use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked. (b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list....

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.

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...

Using HTML/Javascript (if needed) I want to create a table for a website that pulls data...

Using HTML/Javascript (if needed) I want to create a table for a website that pulls data from another website where the data is being updated on. Example: https://investors.coca-colacompany.com/stock-information/historical-data I cannot just put in the numbers to a table as they will be getting updated daily. So it needs to link the the website elements. DATE OPEN HIGH LOW CLOSE VWAP VOLUME % CHG CHANGE TRADE VAL TOTAL TRADES 2020-10-13 -- -- -- 51.09 -- -- 0.00% -- -- -- 2020-10-12...

Html code of Doctors info page

JAVASCRIPT HTML I'm looking to make a function that will take a postal code in a...

JAVASCRIPT HTML I'm looking to make a function that will take a postal code in a text box. The function jobs is to basically make sure the first letter of the postal code starts with these letters. ('A') ('N") ('W') ('F'). If the first letter of the postal code does not match up then an error to the user is sent.

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...

Question