Showing results for tags 'filter'.

Problem arising from 'How to create a filter/search list'.

I have used the guidance at https://www.w3schools.com/howto/howto_js_filter_lists.asp to create a filter/search list. When text is typed into the search box, only the filtered items are shown on screen, as expected. But if, for example, the list contains both ‘Charlie’ and ‘Charles’, and if the user filters for ‘Charlie’, hyperlinking ‘Charlie’ to ‘Charles’ does not work, e.g. Charlie, see <a href=”#Charles”>Charles.</a> ... <a name=”Charles”>Charles</a> ... P erhaps this is because the href tag at this point is only searching the filtered results. Hyperlinks from one item to another like this do work BEFORE the list is filtered, but not AFTER the list has been filtered. Any ideas how to resolve this, please?

Sort search/filter list

piyushk posted a topic in JavaScript

Hi I am new to javascript and was creating search suggestions referring to the article on https://www.w3schools.com/howto/howto_js_filter_lists.asp , but the search suggestions in output are not sorted. Can someone guide me on updating this code to get alphabetically sorted suggestions? Thanks in advance

July 6, 2019
1 reply
- javascipt
- search
- (and 2 more)
  Tagged with:
  - javascipt
  - search
  - filter
  - sort

Filter multiple lists

nomarie posted a topic in JavaScript

I'm basically trying to replicate https://www.w3schools.com/howto/howto_js_filter_lists.asp but with multiple ULs rather than a single one. I've had no problem with the HTML/CSS adaptations, but am stuck on the JS. Can anyone help?

Drop Down Panel

Alana posted a topic in JavaScript

Hello! I am looking for some assistance with my drop down panel. When I try to add "<div id="panel"></div> to the "select to filter by type section", it does not toggle the panel at all. Can you tell me what I am doing incorrectly? http://jsfiddle.net/AlanaVibes/xNj9z/92/#&togetherjs=ROVpoPMv4L <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Checkboxradio - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "input" ).checkboxradio(); } ); </script> </head> <body> <div class="widget"> <h1>Our Manufacturers</h1> <fieldset> <legend>Select a Territory: </legend> <label for="radio-1">All</label> <input type="radio" name="radio-1" id="radio-1"> <label for="radio-2">North Texas</label> <input type="radio" name="radio-1" id="radio-2"> <label for="radio-3">Oklahoma</label> <input type="radio" name="radio-1" id="radio-3"> <label for="radio-4">Arkansas</label> <input type="radio" name="radio-1" id="radio-4"> </fieldset> <script> &(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: left; background-color: white; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> <div id="flip"> <h2>Type of Material</h2></div> <fieldset> <legend> Select to filter by Type </legend> <label for="checkbox-1">Wire & Cable</label> <input type="checkbox" name="checkbox-1" id="checkbox-1"> <label for="checkbox-2">Wire & Cable Accessories</label> <input type="checkbox" name="checkbox-2" id="checkbox-2"> <label for="checkbox-3">Conduit & Fittings</label> <input type="checkbox" name="checkbox-3" id="checkbox-3"> <label for="checkbox-4">Wiring Devices</label> <input type="checkbox" name="checkbox-4" id="checkbox-4"> <label for="checkbox-5">Enclosures & Wireway</label> <input type="checkbox" name="checkbox-4" id="checkbox-5"> <label for="checkbox-6">Lighting</label> <input type="checkbox" name="checkbox-4" id="checkbox-6"> <label for="checkbox-7">Fuses</label> <input type="checkbox" name="checkbox-4" id="checkbox-7"> <label for="checkbox-8">Tools & Fasteners</label> <input type="checkbox" name="checkbox-4" id="checkbox-8"> <label for="checkbox-9">Motor Control</label> <input type="checkbox" name="checkbox-4" id="checkbox-9"> <label for="checkbox-10">Specialty</label> <input type="checkbox" name="checkbox-4" id="checkbox-10"> </fieldset> </div> </body> </html>

November 26, 2018
2 replies
- drop-down panel
- javascript
- (and 2 more)
  Tagged with:

Filtered Table-Dropdown Option Formatting

Alana posted a topic in CSS

How do I change the formatting of the drop down tab? I need each category to be shorter and stack nicer. http://03f7e3d.netsolhost.com/wordpress1/manufacturers/ <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { background-color: #ffffff; padding: 14px; font-family: Garamond; } /* Center website */ .main { width: 1000px; margin: auto; } h1 { font-size: 40px; word-break: break-all; } .row { margin: 40px; } /* Add padding BETWEEN each column */ .row, .row>.column { padding: 16px; } /* Create 5 equal columns that floats next to each other */ .column { float: left; width: 20%; display: none; } /* Clear floats after rows */ .row:after { content: ""; display: table; clear: both; } /* Content */ .content { background-color: white; padding: 14px; width: 180px; height: 75px; } /* The "show" class is added to the filtered elements */ .show { display: block; } /* Style the buttons */ .btn { border: none; outline: none; padding: 4px; background-color: #ebebee; color: black; cursor: pointer; font-family: :times, sans-serif; } .btn:hover { background-color: #c6c6c6; } .btn.active { background-color: #848484; color: white; } </style> </head> <body>  <div class="Main"> <CENTER> <h1>Our Manufacturers</h1> </CENTER> <hr> <div id="myBtnContainer"> <button class="btn active" onclick="filterSelection('ALL')">All</button> <button class="btn" onclick="filterSelection('NTX')"> North Texas</button> <button class="btn" onclick="filterSelection('OK')"> Oklahoma</button> <button class="btn" onclick="filterSelection('AR')"> Arkansas</button> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #ebebee; color: black; padding: 7px; font-size:14px; border: none; } .dropdown { position: relative; display: inline-block; text-align: left; } .dropdown-content { display: none; position: absolute; background-color: #ebebee; min-width: 220px; z-index: 1; } .dropdown-content a { color: black; padding: 3px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #ffff; } </style> </head> <div class="dropdown" id="dropdown"> <button class=" dropbtn">…</button> <div class=" dropdown-content"> <button class="btn" onclick="filterSelection('WC')"> Wire & Cable</button> <button class="btn" onclick="filterSelection('ACC')"> Wire & Cable Accessories</button> <button class="btn" onclick="filterSelection('MC')"> Motor Control</button> <button class="btn" onclick="filterSelection('WD')"> Wiring Devices</button> <button class="btn" onclick="filterSelection('CF')"> Conduit & Fittings</button> <button class="btn" onclick="filterSelection('FUS')"> Fuses</button> <button class="btn" onclick="filterSelection('TOOL')"> Tools & Fasteners</button> <button class="btn" onclick="filterSelection('EW')"> Enclosures & Wireway</button> <button class="btn" onclick="filterSelection('SPEC')"> Specialty</button> </div> </div> </div> </body> </html> </div> </body> </html>    <script> filterSelection("all") function filterSelection(c) { var x, i; x = document.getElementsByClassName("column"); if (c == "all") c = ""; for (i = 0; i < x.length; i++) { w3RemoveClass(x, "show"); if (x.className.indexOf(c) > -1) w3AddClass(x, "show"); } } function w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2) == -1) { element.className += " " + arr2; } } } function w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(" "); arr2 = name.split(" "); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2) > -1) { arr1.splice(arr1.indexOf(arr2), 1); } } element.className = arr1.join(" "); } // Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns.addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } var btnContainer = document.getElementById("dropdown"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns.addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } </script> </body> </html>

November 19, 2018
1 reply
- filter
- table
- (and 2 more)
  Tagged with:
  - filter
  - table
  - dropdown
  - format

Filtered Photo Gallery- Format Issue

Alana posted a topic in HTML/XHTML

I was following the filtered photo gallery tutorial below: https://www.w3schools.com/howto/howto_js_portfolio_filter.asp I have an issue with the photos bunching up on the right side & not shifting to a new column. This is the HTML in the link below: https://www.w3schools.com/code/tryit.asp?filename=FWU52Y6W22GU What can I add to make sure the formatting is right?

November 2, 2018
2 replies
- photo
- gallery
- (and 3 more)
  Tagged with:
  - photo
  - gallery
  - filter
  - html
  - format

JQuery filtering hides Table Heads - How to stop it?

vichilino posted a topic in JavaScript

Hello, i am currently building something that uses this example below in order to filter names, hiding everything that is not being searched into the search bar. My issue is that the JQuery hides the Table Heads, instead of only hiding the none related names to the search. https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filters_table I basically copied pasted the example there, with the difference that I have 3 different tables, they all filter correctly. The only issue is that it also hides the TH. What can i do to stop it form hiding the THs (Room, Sillas, Videos)? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="mystyle2.css"> <link rel="icon" href="favicon.png" /> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> <title>Room Locator CRSSC</title>  </head> <body>  <div class="row"> <div class="col-lg-12"> <div class="alert alert-info alert-dismissible"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Importante:</strong> Escribe abajo el nombre del room que buscas. Da click en el texto para ver el mapa. </div> </div> </div>  <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-body">Room Locator CRSSC <input id="myInput" type="text" placeholder="Search.."></div> </div> </div> </div> </div>     <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio A</div> <div class="panel-body">  <div class="well">Piso 1 </div> <div class="container">  <table class="table table-striped" id="myTable"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Los Quetzales</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Poás</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Isla Uvita</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Irazú</td> <td>7</td> <td>Yes</td> </tr> <tr> <td>Cahuita</td> <td>7</td> <td>Yes</td> </tr> <tr> <td>Chirripó</td> <td>12</td> <td>Yes</td> </tr> <tr> <td>T. Room A</td> <td>15</td> <td>Yes</td> </tr> <tr> <td>T. Room B</td> <td>15</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div>  <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio B</div> <div class="panel-body">  <div class="well">Piso 1</div> <div class="container">  <table class="table table-striped" id="myTable"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Carara</td> <td>4</td> <td>No</td> </tr> <tr> <td>Turrialba</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Arenal</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Braulio Carrillo</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Cabo Blanco</td> <td>5</td> <td>Yes</td> </tr> <tr> <td>Las Baulas</td> <td>5</td> <td>Yes</td> </tr> <tr> <td>Corcovado</td> <td>7</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div>  <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio C</div> <div class="panel-body">  <div class="well">Piso 1</div> <div class="container">  <table class="table table-striped" id="myTable"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Guayabo</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Monteverde</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Ostional</td> <td>4</td> <td>Yes</td> </tr> <tr> <td>Training Room D</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Training Room E</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Tortuguero</td> <td>12</td> <td>Yes</td> </tr> <tr> <td>Training Room E</td> <td>18</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div>    <div class="row"> <div class="col-lg-12"> </div> </div>  <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio A</div> <div class="panel-body">  <div class="well">Piso 2</div> <div class="container">  <table class="table table-striped" > <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Cahuita</td> <td>6</td> <td>Yes</td> </tr> <tr> <td>Irazu</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Corcovado</td> <td>8</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div>  <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio B</div> <div class="panel-body">  <div class="well">Piso 2</div> <div class="container">  <table class="table table-striped"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Cahuita</td> <td>6</td> <td>Yes</td> </tr> <tr> <td>Irazu</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Corcovado</td> <td>8</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div>  <div class="col-sm-4"> <div class="panel panel-default"> <div class="panel-heading">Edificio C</div> <div class="panel-body">  <div class="well">Piso 2</div> <div class="container">  <table class="table table-striped" id="myTable3"> <thead> <tr> <th>Room</th> <th>Sillas</th> <th>Video</th> </tr> </thead> <tbody> <tr> <td>Cahuita</td> <td>6</td> <td>Yes</td> </tr> <tr> <td>Irazu</td> <td>8</td> <td>Yes</td> </tr> <tr> <td>Corcovado</td> <td>8</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </div> </div> </div>  </body> </html>

November 2, 2018
1 reply
- jquery
- filter
- (and 1 more)
  Tagged with:
  - jquery
  - filter
  - filtering

Sanitization of $_GET Superglobal

iwato posted a topic in SQL

BACKGROUND: It appears that there are few problems in web development that do not have multiple solutions. My problem is to decide which solution best suits my needs. I have a confirmation email that sends a name, hash, and email address via an HTTP REQUEST using the $_GET superglobal to a PHP file that matches the hash with an entry in a newsletter roster table. If the match succeeds the value of the status variable is changed from 0 to 1. Before the hash is sent to the roster table it is sanitized using the MySQLi real_escape_string( ) function. Elsewhere on my website I use the PHP filter_var( ) function with parameter values that vary with the nature of the data being sent. QUESTION ONE: In the above instance which PHP function would be more secure. And, why? QUESTION TWO: In general which function is preferred? And, why? Roddy

December 24, 2017
9 replies
- mysqli
- php
- (and 3 more)
  Tagged with:

JavaScript or jQuery - Filter a json array of objects

dzhax posted a topic in JavaScript

Hello All, I am stuck trying to filter results of a json response. I have a sample json response: [ { "id":0, "commentText":"Test", "createdBy":"User1", "isImportant":false }, { "id":1, "commentText":"Hello World", "createdBy":"User2", "isImportant":true }, { "id":2, "commentText":"Testing", "createdBy":"User2", "isImportant":false }, { "id":3, "commentText":"This is another one", "createdBy":"User2", "isImportant":true }, { "id":4, "commentText":"Hello World!", "createdBy":"User2", "isImportant":true } ] I am attempting to filter out results that "isImportant" are not true. I have tried multiple ways of doing it with no luck. IE. var response = $(jsonSample).filter(function (i,n){ return n.isImportant===true }); var response2 = $.grep(Object(jsonSample), function(j){ return j.isImportant !== false; }); var response3 = $.map(jsonSample, function (n,i){ $.each(n, function(j){ return n.isImportant !== false; }) }); console.log(response); //jquery-2.2.4.min.js:2 Uncaught Error: Syntax error, unrecognized expression: ... console.log(response2); //logs every individual character in the jsonSample ["[", "{", """, "i", "d", """, ":", "1", ... console.log(response3); //jquery-2.2.4.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ...

August 17, 2016
9 replies
- jQuery
- JavaScript
- (and 6 more)
  Tagged with:
  - jQuery
  - JavaScript
  - Sort
  - Filter
  - Map
  - Grep
  - JSON
  - jquery-2.2.4

filter for domain and toplevel domain

WesleyA posted a topic in PHP

There is an issue I have with creating a filter for the correct domain and toplevel domain. For example google.com is correct and all the other not. my code: function my_funct($data2) { $data2 = preg_replace('#(http://www.|http:|https:|ftp://www.|https://www./|//|www.|htp:|htt:|htp:/|htt:/|)# ' , '', $data2); return $data2; } but directories wil not be blocked like www.google.com/directory/page/page2 is there a way to use preg_replace and put only domain and toplevel domain in it? maybe it is possible to negate it, but he entire validation of pre_replace would be changed I assume.

October 28, 2015
3 replies
- filter
- preg_replace
- (and 3 more)
  Tagged with:
  - filter
  - preg_replace
  - domain
  - tld
  - directories

block similar character sequence

WesleyA posted a topic in PHP

I'm looking for a way to block input in a text field occuring more than 5 times. For example aaaaaa is wrong but: A sentence having an input of a happening several times or even more is okay. above sentence has 7 inputs and shouldnt be blocked. What is the solution?

October 9, 2015
14 replies
- preg_replace
- php
- (and 3 more)
  Tagged with:
  - preg_replace
  - php
  - filter
  - form
  - validation

PHP Filter / Sanatization

Dragon_12dk posted a topic in PHP

Hello, I have recently been attempting to make HTML forms in my website filtered by PHP strings... I have a PHP Filter that should work, However I am not sure on how to Integrate it into my HTML forms. Here is what I have right now... HTML Form <h3>Add Site Manual</h3><div class="addurlSmall">Enter the Site Title, Url and Description you want to add, it will automatically add it in the database</div><br /><?php require 'BannedWords.php';?><form action="/index.php?a=admin" method="post"><div class=""> Site Title: <input type="text" name="addtitle" value="" required /><br /> Site URL: <input type="url" name="addurl" value="http://" required /><br /> Site Description: <br /><textarea lass="ads" name="adddesc" required></textarea></div><br /><input type="submit" value="Add new result"/></form> PHP Filter. <?php$ban_array = array( 'Bad', 'Words', 'Here');$input_array = array ( 'adddesc', 'addurl', 'addtitle');$isvalid = true;foreach ( $ban_array as $v ) { foreach ( $input_array as $vv ) { if ( strpos($form->data[$vv], $v) !== false ) { $form->validation_errors[$vv] = 'Banned words in use!!'; return false; } }}?> Any help would be appreciated Thanks.

May 9, 2015
1 reply
- PHP
- Filter
- (and 3 more)
  Tagged with:
  - PHP
  - Filter
  - Sanatization
  - help
  - html

Vista Aero effect by CSS3

composite posted a topic in CSS

Just see and enjoy it. http://jsfiddle.net/composite/6zr2q/embedded/result/ HOW TO: just click anywhere to show or hide and enjoy aero effects. BROWSERS: Firefox (All versions exclude blur effects but looks good like windows 8.) Chrome 19 and above. Safari 6 and above (sorry windows safari users.). Opera 15 and above (Only affect by webkit). Sorry for IE users. IE All version include 11. I'm finding figure out for IE looks like Firefox. TECH: Effects by CSS3 Only. Javascript is just for toggle class. that's all. transition used for show and hide animation. transform used for show and hide effect. filter:blur used for blurred window effect.

December 19, 2013
4 replies
- vista
- aero
- (and 5 more)
  Tagged with:
  - vista
  - aero
  - css3
  - transform
  - transition
  - filter
  - blur

Search the Community

Search By Tags

Search By Author

Content Type

Forums

Calendars

Find results in...

Find results that contain...

Date Created

Start

End

Last Updated

Start

End

Filter by number of...

Minimum number of comments

Minimum number of replies

Minimum number of reviews

Minimum number of views

Joined

Start

End

Group

AIM

MSN

Website URL

ICQ

Yahoo

Jabber

Skype

Location

Interests

Languages