No Description Available
1
This Javascript Search Bar is a live frontend search tool, which is useful for making frontend search bar.
Slick marquee slider - manage HTML marquee with slick javascript library.
onex
This is a multiple-input fields generator that can generate or add or create multiple input fields dynamically at a time.
Tesseract js demo scan text over the image by just doing small amounts of code.
Cropperjs is a feature-rich pure javascript library for cropping image. using this you can able to able to provide image cropping to the client-side.
let place = document.querySelector('#elem'); let data= ''; let row = ''; fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(json => { console.log(json[1]) for(let i=0;i<json.length;i++){ row++; data += `<tr> <td>${json[i].id}</td> <td class="list">${json[i].title}</td> <td>${json[i].body.substring(0,65)}</td> </tr>`; } place.innerHTML = data; }) $(document).ready(function(){ $('#input').keyup(function(){ let mrow = ''; let list = $('.list'); let val = $(this).val().toUpperCase(); for(let i=0;i<list.length;i++){ if($(this).val() !=''){ if($('.list').eq(i).text().toUpperCase().lastIndexOf(val) > -1){ let ind = $('.list').eq(i).text().toUpperCase().indexOf(val); let txt = $('.list').eq(i).text(); mrow++; $('.list').eq(i).html(txt.slice(0,ind)+'<b>'+$(this).val()+'</b>'+txt.slice(ind+val.length)).parent().fadeIn(); }else{ $('.list').eq(i).parent().fadeOut(); } }else{ for(let i=0;i<list.length;i++){ $('.list b').eq(i).contents().unwrap(); $('.list').eq(i).parent().fadeIn(); } } } if(!$(this).val() == ''){ $('.resMatch').html(mrow+'/'+row).parent().show(); }else{ $('.resMatch').parent().fadeOut(); } }) });
<section class="pt-5"> <div class="container"> <div class="searchBar"> <div class="row"> <h1 class="center">Javascript Search</h1> </div> <div class="row"> <div class="col-md-6 center"> <div class="form-group"> <input type="text" id="input" class="form-control" placeholder="Enter Your Query"> </div> </div> </div> <div class="row"> <div class="col-md-10 center"> <p class="res float-right" style="display:none"><b>Result Match</b> <span class="resMatch">10/256</span></p> <table class="table table-hover table-striped"> <thead> <tr> <th>Sr</th> <th>Name</th> <th>Body</th> </tr> </thead> <tbody id="elem"> </tbody> </table> </div> </div> </div> </div> </section>