JQuery Live Search Basic Example

Developer
Html5andblog
Size
2,050 Kb
Views
56,672
  1. JQuery Live Search Basic Example Previews
  2. JQuery Live Search Basic Example HTML Codes
  3. JQuery Live Search Basic Example CSS Codes
  4. JQuery Live Search Basic Example JS Codes

How do I make an jquery live search basic example?

What is a jquery live search basic example? How do you make a jquery live search basic example? This script and codes were developed by Html5andblog on 21 August 2022, Sunday.

JQuery Live Search Basic Example Previews
IQ Test

JQuery Live Search Basic Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Live Search Basic Example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="text" class="live-search-box" placeholder="search here" />
<ul class="live-search-list">
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Live Search Basic Example - Script Codes CSS Codes

.live-search-list {
-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;
color: #fff;
}
.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;
}
.live-search-list li {
color: fff;
list-style: none;
padding: 0;
margin: 5px 0;
}

JQuery Live Search Basic Example - Script Codes JS Codes

jQuery(document).ready(function($){
$('.live-search-list li').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('.live-search-box').on('keyup', function(){
var searchTerm = $(this).val().toLowerCase(); $('.live-search-list li').each(function(){ if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { $(this).show(); } else { $(this).hide(); } });
});
});
JQuery Live Search Basic Example - Script Codes
JQuery Live Search Basic Example - Script Codes
Home Page Home
Developer Html5andblog
Username html5andblog
Uploaded August 21, 2022
Rating 3.5
Size 2,050 Kb
Views 56,672
Do you need developer help for JQuery Live Search Basic Example?

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
HTML5 Canvas Animated Background Part 2
Detect Image Orientation with JavaScript
JQuery Live Search on an RSS Feed
Particles JS Background
Brick by Brick - Full Functionality - Infinite Scroll
Animated CSS Background - Moves with Cursor
Styling HTML Checkboxes
Snow Flurry Version 2
JQuery News Ticker
Letter by Letter JS Example
Create amazing art & images 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!