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

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.

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

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

Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it....

Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it. The button should say ‘Click to receive $10!’ However, any time the user’s mouse cursor gets over the button, the button should move to a random location on the page, making the button essentially impossible to click! However, if they do somehow manage to click the button, redirect the user to an image of a 10 trillion Zimbabwe Dollar. Finally, the background color of...

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

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...

Question