JQuery Live Search on an RSS Feed

Developer
Html5andblog
Size
2,312 Kb
Views
87,032
  1. JQuery Live Search on an RSS Feed Previews
  2. JQuery Live Search on an RSS Feed HTML Codes
  3. JQuery Live Search on an RSS Feed CSS Codes
  4. JQuery Live Search on an RSS Feed JS Codes

How do I make an jquery live search on an rss feed?

JQuery live search snippet combined with the jQuery RSS plugin created by Sascha Depold (https://github.com/sdepold/jquery-rss). What is a jquery live search on an rss feed? How do you make a jquery live search on an rss feed? This script and codes were developed by Html5andblog on 09 August 2022, Tuesday.

JQuery Live Search on an RSS Feed Previews
IQ Test

JQuery Live Search on an RSS Feed - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Live Search on an RSS Feed</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="rss-feed">
<input type="text" class="live-search-box" placeholder="Live Search Posts" />
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/jquery.rss.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Live Search on an RSS Feed - Script Codes CSS Codes

.rss-feed {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
background-color: #2c3e50;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: 'Lato', sans-serif;
}
.live-search-box {
width: 100%;
display: block;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #3498db;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rss-feed ul {
list-style: none;
padding: 0;
margin: 1em 0 0.5em;
}
.rss-feed a {
text-decoration: none;
color: #fff;
}

JQuery Live Search on an RSS Feed - Script Codes JS Codes

jQuery(document).ready(function($){
$('.rss-feed').rss(
'http://feeds.feedburner.com/Html5AndBeyondHtml5AndBeyond',{
limit: 10,
entryTemplate: '<li><a href="{url}" target="_blank">{title}</a></li>',
success: function(){
$('.rss-feed ul li a').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
}
})
$('.live-search-box').on('keyup', function(){
var searchTerm = $(this).val().toLowerCase(); $('.rss-feed ul li a').each(function(){ if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { $(this).parent('li').show(); } else { $(this).parent('li').hide(); } });
});
});
JQuery Live Search on an RSS Feed - Script Codes
JQuery Live Search on an RSS Feed - Script Codes
Home Page Home
Developer Html5andblog
Username html5andblog
Uploaded August 09, 2022
Rating 3
Size 2,312 Kb
Views 87,032
Do you need developer help for JQuery Live Search on an RSS Feed?

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!

Html5andblog (html5andblog) Script Codes
Name
Coin Flip Application
Snow Flurry - Wordpress and jQuery Plugin
Fix Navigation to Screen on Scroll
Type It Out jQuery Plugin - Basic
HTML5 Video Color Filter Effect
Snow Flurry Version 2
Letter by Letter JS Basic Example
HTML5 Canvas Animated Background Part 1
HTML5 Canvas Animated Background Part 2
Detect Image Orientation with JavaScript
Create amazing SEO content 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!