javascript - Jquery text search and do something with that text -
i trying looks through div id of 'holder' , searches string. preferably string case-insensitive. string have input connected (variable 'terms'). once code has found paragraphs have string, add class them called 'found'. not have knowledge jquery (just basics) if me, fantastic!
code far:
<!doctype html> </html> <body> <p id="header">searcher</p> <hr> <p id="form"> <input autocomplete="off" id="bar" name="input" type="text" placeholder="search word or phrase"> <button type="button" id="sea" onclick="search ()">search</button> <br> </p> <div id="holder"> <p id="note">this test paragraph uses test.</p> <p id="note">for jquery. want search paragraph using "for jquery".</p> </div> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="test.js"> </script> </body>
here working code sample. should read comments because made few changes how doing things in order improve code quality. there still more done (like using real form), should pointed in right direction. if comments aren't clear, feel free ask why made changes did , i'll try provide better explanation.
<html> <style> .match-found { background: yellow; } </style> <body> <p id="header">searcher</p> <hr> <p id="form"> <!-- should use real form , attach submit handler, feel need leave exercise reader --> <input autocomplete="off" id="bar" name="input" type="text" placeholder="search word or phrase"> <button type="button" class="search-text" data-search-target="#holder">search</button> <br> </p> <div id="holder"> <p id="note">this test paragraph uses test.</p> <p id="note">for jquery. want search paragraph using "for jquery".</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> function search(searchtarget, term) { // lowercase terms because uppercase should reserved constructors // made singular because we're looking exact match, not // list several separate terms. // (if understand problem description correctly) term = term.tolowercase(); // if you're searching simple terms, regex better, // since i'm not sure how you'll using this, // lowercasing string , searching containing string // provide more consistent results because won't have worry // escaping special characters , like. $(searchtarget).find('p').each(function() { var searchtext = $(this).text().tolowercase(); if (searchtext.indexof(term) !== -1) $(this).addclass('match-found'); // match-found more descriptive 'found'. // avoiding caps again because capitilization has specific meaning }); } // better way attach event listeners $(document).ready(function() { $('.search-text').click(function() { var searchtarget = $(this).attr('data-search-target'); var searchtext = $('#bar').val(); search(searchtarget, searchtext); }); }); </script> </body> </html>
Comments
Post a Comment