Search it

Developer
Mirjamsk
Size
3,338 Kb
Views
4,048
  1. Search it Previews
  2. Search it HTML Codes
  3. Search it CSS Codes
  4. Search it JS Codes

How do I make an search it?

. What is a search it? How do you make a search it? This script and codes were developed by Mirjamsk on 26 January 2023, Thursday.

Search it Previews
IQ Test

Search it - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search it</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container row"> <div class="section"> <h1> Search it!</h1> <div>jQuery plugin that makes any block of content searchable by filtering content. It also provides more intuitive filtering when using the <a href="http://materializecss.com/collapsible.html" target="_blank">Materialize Collapsible component</a>.</div> <div><b>See <a href="https://mirjamsk.github.io/search-it/" target="_blank">official page</a> containing a demo & getting started guide. </b></div> </div> <div class="divider"></div> <div class="search-it-container"> <div class="section col s12 m6 l3"> <ul id="searchable-1" class="collapsible collapsible-example" data-collapsible="expandable"> <li> <div class="collapsible-header active">Exams</div> <div class="collapsible-body"> <ul> <li><a href="#">Enroll</a></li> <li class="active"><a href="#">Withdraw</a></li> <li><a href="#">List of exam sessions</a></li> </ul> </div> </li> <li> <div class="collapsible-header">Messages and Notifications</div> <div class="collapsible-body"> <ul> <li><a href="#">E-mail</a></li> <li><a href="#">Messages</a></li> <li><a href="#">Yammer</a></li> </ul> </div> </li> <li> <div class="collapsible-header">Courses</div> <div class="collapsible-body"> <ul> <li><a href="#">My courses</a></li> <li><a href="#">My attendance </a></li> <li><a href="#">Final thesis</a></li> <li><a href="#">Schedule</a></li> </ul> </div> </li> </ul> </div> <div class="section col s12 m6 l3 offset-l1"> <div class="collection" id="searchable-2"> <a href="#!" class="collection-item">Social networks</a> <a href="#!" class="collection-item">E-business </a> <a href="#!" class="collection-item">Marketing through content</a> <a href="#!" class="collection-item">Business intelligence </a> </div> </div> <div class="section col s12 m6 l3 offset-l1"> <div class="input-field" id="input-container-3"> <input id="navbar-search" type="text"> <label for="navbar-search"><i class="material-icons small">filter_list</i> Filter</label> </div> <table class="bordered" id="searchable-3"> <tbody> <tr> <td>234444</td> <td>Social networks</td> </tr> <tr> <td>334305</td> <td>Marketing through content</td> </tr> <tr> <td>200304</td> <td>Business intelligence</td> </tr> </tbody> </table> </div> </div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js'></script>
<script src='https://cdn.rawgit.com/mirjamsk/search-it/master/search-it.js'></script> <script src="js/index.js"></script>
</body>
</html>

Search it - Script Codes CSS Codes

.container { margin-top: 0.5rem;
}
.collapsible-example .collapsible-header { font-weight: 500; color: #5F5F5F !important;
}
.collapsible-example .collapsible-header.active { background-color: #F6F6F6 !important;
}
.collapsible-example .collapsible-body li a { display: block; color: #5F5F5F; padding: 0 37.5px 0 45px; font-size: 13px; line-height: 44px; height: 44px;
}
.collapsible-example .collapsible-body li.active { background-color: #005587 !important;
}
.collapsible-example .collapsible-body li.active a { color: #ffffff !important; font-weight: 500;
}
.collapsible-example .collapsible-header:hover,
.collapsible-example .collapsible-body li:hover { background-color: #F6F6F6;
}
.material-icons { vertical-align: text-bottom;
}
i.small { font-size: 1.3rem;
}
.search-it-container { margin-top: 2.5rem;
}
.search-it-container .section { min-width: 27%
}
.search-it-container .section:first-of-type { margin-left: 1%;
}

Search it - Script Codes JS Codes

$(document).ready(function() { $('#searchable-2').searchIt({ itemSelector: 'a', inputLabelValue: 'Looking for something?', }); $('#searchable-3').searchIt({ itemSelector: 'tr', $searchInput: $('#input-container-3').find('input'), }); $('#searchable-1').searchIt({ useMaterializeCollapsible: true, itemSelector: '.collapsible-body a', // optional searchTemplate: '<div class="input-field">' + '<input id="navbar-search" type="text">' + '<label for="navbar-search"><i class="material-icons small">search</i> Search</label>' + '</div>' });
});
Search it - Script Codes
Search it - Script Codes
Home Page Home
Developer Mirjamsk
Username alojzije
Uploaded January 26, 2023
Rating 3
Size 3,338 Kb
Views 4,048
Do you need developer help for Search it?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mirjamsk (alojzije) Script Codes
Name
Materialize pagination
Connect html elements with SVG path
Visualize DNA using chaos game
Horizontal slider on scroll
Horizontal slider
Gravity simulation
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!