Static doc search

Developer
Tom
Size
5,255 Kb
Views
12,144
  1. Static doc search Previews
  2. Static doc search HTML Codes
  3. Static doc search CSS Codes

How do I make an static doc search?

What is a static doc search? How do you make a static doc search? This script and codes were developed by Tom on 16 September 2022, Friday.

Static doc search Previews
IQ Test

Static doc search - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Static doc search</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="header"></div>
<div id="searching-ui">	<form>	<fieldset>	<label for="search-query">Search</label>	<input id="search-query" type="text" name="query" placeholder="Search for...">	</fieldset>	<fieldset>	<input id="search-attr-resource" type="checkbox" name="attr" value="resource" checked>	<label for="search-attr-resource">resource name</label>	</fieldset>	<fieldset>	<input id="search-attr-inputs" type="checkbox" name="attr" value="inputs" checked>	<label for="search-attr-inputs">query param / body value</label>	</fieldset>	<fieldset>	<input id="search-attr-response" type="checkbox" name="attr" value="response" checked>	<label for="search-attr-response">response value</label>	</fieldset>	</form>	<ol id="search-results">	<!-- sample markup only; will be generated at runtime -->	<li class="searchResult">	<a href="#" class="searchResult-resourceName">BalancingActivityCommand</a>	<ol class="searchResult-resourceVerbs">	<li class="searchResult-resourceVerb">HEAD</li>	<li class="searchResult-resourceVerb">GET</li>	<li class="searchResult-resourceVerb">POST</li>	<li class="searchResult-resourceVerb">PUT</li>	<li class="searchResult-resourceVerb">DELETE</li>	</ol>	</li>	<li class="searchResult">	<a href="#" class="searchResult-resourceName">BalancingActivityCommand</a>	<ol class="searchResult-resourceVerbs">	<li class="searchResult-resourceVerb">HEAD</li>	<li class="searchResult-resourceVerb">GET</li>	<li class="searchResult-resourceVerb">POST</li>	<li class="searchResult-resourceVerb">PUT</li>	<li class="searchResult-resourceVerb">DELETE</li>	</ol>	</li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">AddressBookEntry</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">AlertLog</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">Archive</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ArchiveCommand</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ArchiveMaintenance</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ArchiveMaintenanceTotals</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ArchiveMetadata</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ArchivePassword</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ArchiveTotals</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">AuthToken</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">AuthTokenAndRegistration</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">AuthTokenViaLoginKey</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">BackupArchiveTimestampRange</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">BackupReport</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">BackupTotals</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">BackupTreeNode</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">BalancingActivity</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">BalancingCommand</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">BizCloudTrial</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">Cli</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ClientDownloadUrl</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">Cluster</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ColdStorage</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">Computer</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ComputerBlock</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ComputerCommonSyncPlans</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ComputerDeactivation</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ComputerDeauthorization</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ComputerDefaults</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">ConnectedServerUrl</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">DataKeyToken</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">DatabaseDump</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">DatabaseImport</a></li>	<li class="searchResult"><a href="#" class="searchResult-resourceName">Date</a></li>	<!-- end sample markup -->	</ol> <!-- end #search-results -->
</div>
<div id="documentation">	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt dignissim mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed fermentum tempus magna eget blandit. Nullam ullamcorper turpis tempus metus aliquam tristique. Maecenas ex velit, vulputate vel pulvinar placerat, tempus et leo. Aenean sit amet aliquet diam. Nunc ac turpis id est fringilla fermentum. Pellentesque vehicula condimentum quam sollicitudin pharetra. Aliquam hendrerit lectus finibus maximus dignissim. Proin accumsan tristique justo id efficitur. Etiam ut sapien laoreet, tempor purus sit amet, imperdiet justo. Curabitur euismod velit nisl, eu euismod nisi dapibus in. Cras ornare at lacus nec tempus. Suspendisse nec eleifend nisl.</p>
<p>Nulla rhoncus, ligula sed hendrerit vulputate, ex magna interdum ex, quis tristique est neque a purus. Phasellus lorem ligula, interdum tristique diam et, convallis molestie libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec auctor arcu quis lorem gravida feugiat. Quisque eget quam vitae elit rhoncus lobortis. Aliquam gravida purus quis tincidunt commodo. Maecenas eu libero porta, mollis justo et, semper odio. Nunc sagittis, tellus in consectetur semper, ex velit blandit diam, at suscipit quam massa quis lacus. Donec sodales, purus id tincidunt feugiat, dui dui mattis lacus, nec maximus urna augue id nibh. Ut bibendum fringilla nunc, ut maximus elit cursus eget. Sed at lacinia nulla. Proin consectetur sit amet diam vel rutrum. Morbi fringilla nisi at augue dignissim auctor. Curabitur nec tortor lorem.</p>
<p>Morbi non orci sed mauris ultrices elementum ut id lacus. Duis eu semper lacus. Sed hendrerit nunc vitae pellentesque mollis. Phasellus a tortor iaculis, sodales turpis quis, rhoncus metus. Duis feugiat accumsan dolor ut vulputate. Fusce pharetra lacus in arcu egestas, nec maximus erat pellentesque. Etiam imperdiet cursus felis.</p>
<p>In maximus gravida consequat. Integer metus lorem, feugiat ut interdum non, bibendum euismod tortor. In dignissim elit turpis, condimentum aliquet quam sollicitudin in. Donec cursus ex id urna ultrices, eget gravida leo ornare. Donec vel erat vel nisi consequat ultrices eget sed lorem. Nulla pretium maximus rhoncus. Fusce eu nulla mollis, imperdiet lorem vitae, euismod metus. Morbi elementum viverra felis at ullamcorper. Vivamus ullamcorper erat id lobortis pretium. Vivamus eget nisi vitae eros rhoncus rutrum ac at augue. Phasellus cursus enim rhoncus, interdum ligula sit amet, malesuada libero. Nunc vitae mattis orci. Praesent quis laoreet ligula. Vestibulum vestibulum tellus et purus consequat pulvinar.</p>
<p>Sed tristique ipsum sed justo sollicitudin aliquam. Ut nisl turpis, ultrices sit amet euismod vitae, gravida et felis. Morbi justo odio, accumsan at libero sit amet, cursus laoreet enim. Vestibulum vel vehicula nisi, nec consectetur lorem. Maecenas sit amet pretium ante. Morbi nec finibus est. Aenean dapibus, turpis a congue tempor, elit dolor condimentum leo, quis pulvinar nibh felis imperdiet tellus. Vivamus dignissim, orci eu pretium hendrerit, mi risus bibendum est, sit amet rhoncus nisi risus et eros.</p>
</div>
</body>
</html>

Static doc search - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { color: #333131; font-family: 'Open Sans', Arial, sans-serif; font-size: 18px; padding-left: 17rem; padding-right: 2rem;
}
#searching-ui { position: fixed; top: 5rem; left: 0; margin: 0; padding: 1.2rem 0.9rem; border: 1px solid #efedf3; box-shadow: 0px 1px 2px 0px rgba(200, 200, 200, 0.3); font-size: 0.8rem;
}
#searching-ui form, #searching-ui fieldset { display: block; border: none; font-family: 'Open Sans'; font-weight: 100;
}
#searching-ui ol { padding: 0; list-style: none;
}
#searching-ui fieldset { margin: 0; padding: 0.2rem 0.1rem; line-height: 1.5; vertical-align: center;
}
#searching-ui label[for="search-query"] { position: absolute; top: auto; left: -10000px; width: 1px; height: 1px; overflow: hidden;
}
#searching-ui input[type="text"] { display: block; margin: 0 auto; padding: 0.2rem 0.5rem; width: 98%; border: 1px solid #e1dee9; box-shadow: inset 0px 0px 3px 1px rgba(200, 200, 200, 0.1); font-size: 0.8rem; line-height: 1.5; outline: none;
}
#searching-ui input[name="query"] { margin-bottom: 0.5rem;
}
#searching-ui input[type="checkbox"] { position: relative; left: 0.5rem; margin-right: 0.7rem;
}
#searching-ui #search-results { margin-top: 2rem; max-height: 20rem; overflow: scroll; border: 1px solid #e1dee9; padding: 0.25rem 0;
}
#searching-ui .searchResult { position: relative; padding: 0; line-height: 1.8; background: #fff;
}
#searching-ui .searchResult a { display: block; clear: both; padding: 0.1rem 0.4rem 0.1rem;
}
#searching-ui .searchResult :link,
#searching-ui .searchResult :visited,
#searching-ui .searchResult :hover,
#searching-ui .searchResult :focus,
#searching-ui .searchResult :active { cursor: pointer; text-decoration: none; color: #994119;
}
#searching-ui .searchResult :hover,
#searching-ui .searchResult :focus,
#searching-ui .searchResult :active { background: #fff6f2;
}
#searching-ui .searchResult:after { position: absolute; top: 0; right: 0; display: block; width: 20px; height: 90%; content: ''; background: #f5f5ff;
}
#searching-ui .searchResult-resourceName { font-weight: 400;
}
#searching-ui .searchResult-resourceVerbs { display: none; position: absolute; left: 0.3rem; bottom: -8px; font-size: 0.6rem; line-height: 1; background: inherit; padding: 0 5px; z-index: 1000;
}
#searching-ui .searchResult-resourceVerb { display: inline-block; padding: 1px;
}
Static doc search - Script Codes
Static doc search - Script Codes
Home Page Home
Developer Tom
Username tomprogers
Uploaded September 16, 2022
Rating 3
Size 5,255 Kb
Views 12,144
Do you need developer help for Static doc search?

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!

Tom (tomprogers) Script Codes
Name
Playing with auto-truncation of text
Encoding
JQueryUI widemeter widget
CSS3 glowing LEDs
API documentation
Table styling
Crawford - layout
Layout for wordsearch tutorial
JQueryUI Capacity Meter widget
Layout for crafting assistant
Create amazing captions 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!