Text Search

Developer
Size
5,634 Kb
Views
20,240

How do I make an text search?

A trimmed down and searchable proof-of-concept version of http://writingcenter.ua.edu/32-2/. Uses HTML5's data attribute feature to make tags and categories for each link. Dropdown menu is also implemented using CSS3 and unordered lists.. What is a text search? How do you make a text search? This script and codes were developed by Lauren on 18 September 2022, Sunday.

Text Search Previews

Text Search - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Search</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0px; padding: 0px; border: 0px; box-sizing: border-box;
}
html { width: 100%; height: 100%;
}
body { background: #EEE; font: 14px 'Trebuchet MS', Helvetica, sans-serif; width: 100%; height: 100%;
}
header { padding: 10px 20px; background: #333; width: 100%;
}
header .inner { margin: 0px auto; text-align: right; width: 90%; max-width: 960px;
}
input[name=search] { display: inline-block; margin-left: 10px; padding: 5px 10px; background: #262626; color: #EEE; font-size: 14px; border: 0px; border-radius: 3px;
}
h1 { margin: 0px; padding: 20px 0px 5px 0px; color: #222; font-size: 20px;
}
.category-select { display: inline-block; position: relative; list-style: none;
}
.category-select h1,
.category-select li { display: block; margin: 0px; padding: 5px 10px; background: #262626; color: #888888; font-size: 14px; text-align: left; border: 0px; width: 180px; cursor: pointer;
}
.category-select h1:hover,
.category-select li:hover { color: #EEE;
}
.category-select h1 { position: relative; border-radius: 3px;
}
.category-select h1:after { content: '▼'; position: absolute; top: 5px; right: 10px;
}
.category-select ul { position: absolute; top: 26px; left: 0px; height: 0px; overflow: hidden;
}
.category-select li { border-top: 1px #4d4d4d solid; opacity: 0; transition-property: all, text-color; transition-duration: 0.2s, 0.1s; transition-timing-function: linear;
}
.category-select li:last-child { border-radius: 0px 0px 3px 3px;
}
.category-select:hover ul { height: auto; overflow: auto;
}
.category-select:hover li { opacity: 1;
}
.table a { display: block; margin-bottom: 5px; color: #6F201C; text-decoration: none;
}
.table a:before { content: '●'; padding-right: 10px; color: #222;
}
.table a:hover { color: #982c26;
}
.main { margin: 0px auto; width: 90%; max-width: 960px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <div class="inner"> <div class="category-select"> <h1>View All</h1> <ul></ul> </div> <input name="search" type="text" placeholder="search" /> </div>
</header>
<div class="main"> <h1>Conducting Research</h1> <div class="table"> <a href="#" data-category="Conducting Research" data-tags="conducting,research,annotating,texts">Annotating Texts</a> <a href="#" data-category="Conducting Research" data-tags="conducting,research,avoiding,plagiarism">Avoiding Plagiarism</a> <a href="#" data-category="Conducting Research" data-tags="conducting,research,evaluating,sources">Evaluating Sources</a> <a href="#" data-category="Conducting Research" data-tags="conducting,research,interpreting,sources">Interpreting Sources</a> <a href="#" data-category="Conducting Research" data-tags="conducting,research,responding,opposing,arguments">Responding to Opposing Arguments</a> </div> <h1>Resources</h1> <div class="table"> <a href="#" data-category="AMA Style" data-tags="ama,style,nebraska,methodist,college">AMA Style (from Nebraska Methodist College)</a> <a href="#" data-category="AMA Style" data-tags="ama,style,university,washington,health,sciences,library">AMA Style (from the University of Washington Health Sciences Library)</a> <a href="#" data-category="APA Style" data-tags="apa,style,sample,paper,pdf,purdue,owl">APA Sample Paper (PDF from the Purdue OWL)</a> <a href="#" data-category="APA Style" data-tags="apa,style,american,psychological,association,website">APA Style (from the American Psychological Association website)</a> <a href="#" data-category="APA Style" data-tags="apa,style,basics,purdue,owl">APA Style Basics (from the Purdue OWL)</a> <a href="#" data-category="Chicago Style" data-tags="chicago,style,manual,online">Chicago Manual of Style Online</a> <a href="#" data-category="Chicago Style" data-tags="chicago,style,sample,paper,pdf,dianahacker">Chicago Style Sample Paper (PDF from dianahacker.com)</a> </div> <h1>Evaluating Arguments</h1> <div class="table"> <a href="#" data-category="Evaluating Arguments" data-tags="evaluating,arguments,planning,paper">Planning Your Paper</a> <a href="#" data-category="Evaluating Arguments" data-tags="evaluating,arguments,transitions">Transitions</a> <a href="#" data-category="Evaluating Arguments" data-tags="evaluating,arguments,writing,paragraphs">Writing Paragraphs</a> <a href="#" data-category="Evaluating Arguments" data-tags="evaluating,arguments,usage,style">Usage and Style</a> </div> <h1>Usage and Style</h1> <div class="table"> <a href="#" data-category="Usage and Style" data-tags="usage,style,cliches">Cliches</a> <a href="#" data-category="Usage and Style" data-tags="usage,style,confused,misused,verbs">Confused and/or Misused Verbs</a> <a href="#" data-category="Usage and Style" data-tags="usage,style,double,negatives">Double Negatives</a> <a href="#" data-category="Usage and Style" data-tags="usage,style,reducing,wordiness">Reducing Wordiness</a> <a href="#" data-category="Usage and Style" data-tags="usage,style,using,adjectives">Using Adjectives</a> <a href="#" data-category="Usage and Style" data-tags="usage,style,ten,steps,better,writing">Ten Steps to Better Writing</a> <a href="#" data-category="Usage and Style" data-tags="usage,style,word,connotations">Word Connotations</a> <a href="#" data-category="Usage and Style" data-tags="usage,style,write,better,fast,paramedic,method">Write Better Fast with the Paramedic Method</a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Text Search - Script Codes CSS Codes

* { margin: 0px; padding: 0px; border: 0px; box-sizing: border-box;
}
html { width: 100%; height: 100%;
}
body { background: #EEE; font: 14px 'Trebuchet MS', Helvetica, sans-serif; width: 100%; height: 100%;
}
header { padding: 10px 20px; background: #333; width: 100%;
}
header .inner { margin: 0px auto; text-align: right; width: 90%; max-width: 960px;
}
input[name=search] { display: inline-block; margin-left: 10px; padding: 5px 10px; background: #262626; color: #EEE; font-size: 14px; border: 0px; border-radius: 3px;
}
h1 { margin: 0px; padding: 20px 0px 5px 0px; color: #222; font-size: 20px;
}
.category-select { display: inline-block; position: relative; list-style: none;
}
.category-select h1,
.category-select li { display: block; margin: 0px; padding: 5px 10px; background: #262626; color: #888888; font-size: 14px; text-align: left; border: 0px; width: 180px; cursor: pointer;
}
.category-select h1:hover,
.category-select li:hover { color: #EEE;
}
.category-select h1 { position: relative; border-radius: 3px;
}
.category-select h1:after { content: '▼'; position: absolute; top: 5px; right: 10px;
}
.category-select ul { position: absolute; top: 26px; left: 0px; height: 0px; overflow: hidden;
}
.category-select li { border-top: 1px #4d4d4d solid; opacity: 0; transition-property: all, text-color; transition-duration: 0.2s, 0.1s; transition-timing-function: linear;
}
.category-select li:last-child { border-radius: 0px 0px 3px 3px;
}
.category-select:hover ul { height: auto; overflow: auto;
}
.category-select:hover li { opacity: 1;
}
.table a { display: block; margin-bottom: 5px; color: #6F201C; text-decoration: none;
}
.table a:before { content: '●'; padding-right: 10px; color: #222;
}
.table a:hover { color: #982c26;
}
.main { margin: 0px auto; width: 90%; max-width: 960px;
}

Text Search - Script Codes JS Codes

$(document).ready(function() { // Populate categories array using the data-category tags var categories = []; $('.table a').each(function() { var category = $(this).attr('data-category'); if ($.inArray(category, categories) === -1) { categories.push(category); } }); // Create the dropdown menu elements $('<li>').html('View All') .css('transition-delay', '0s, 0s') .appendTo($('.category-select ul')); for (var i = 0; i < categories.length; i++) { $('<li>').html(categories[i]) .css('transition-delay', ((i+1)*0.2) + 's, 0s') .appendTo($('.category-select ul')); } // Category select function $('.category-select li').click(function() { var category = $(this).html(); $('.category-select h1').html(category); var query = $('input[name=search]').val(); var category = $(this).html(); filter(category, query); }); // Search functionality $('input[name=search]').keyup(function() { var query = $(this).val(); var category = $('.category-select h1').html(); filter(category, query); });
});
function filter(category, query) { // Show all links $('.table a').show(); if (category === 'View All') { search(query); return; } // Hide links that do not match category $('.table a').each(function() { if ($(this).attr('data-category') != category) { $(this).hide(); } }).promise().done(function() { search(query); });
}
function search(query) { if (!query) { hideHeadings(); return; } // Filter by search $('.table a').each(function() { console.log($(this).is(':visible')); if ($(this).is(':visible')) { var tags = $(this).attr('data-tags').split(','); for (var i = 0; i < tags.length; i++) { var match = matchQueryTag(query, tags[i]); if (!match) { $(this).hide(); } else { $(this).show(); break; } } } }).promise().done(hideHeadings);
}
function matchQueryTag(query, tag) { return query.length <= tag.length && query === tag.substring(0, query.length);
}
function hideHeadings() { $('.table').prev('h1').show(); // Hide headings if there isn't any content underneath them $('.table').each(function() { if ($(this).children(':visible').length === 0) { $(this).prev('h1').hide() } });
}
Text Search - Script Codes
Text Search - Script Codes
Home Page Home
Developer Lauren
Username phantomesse
Uploaded September 18, 2022
Rating 3
Size 5,634 Kb
Views 20,240
Do you need developer help for Text 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!

Lauren (phantomesse) Script Codes
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!