javascript - Easy filter from HTML divisions with jQuery -

-

i'm trying change background-color css property of item matches input criteria given:

my html: 

<!doctype html> <html> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="plantilla.css"> <script src="plantilla.js"></script> <head> <title>plantilla</title> </head> <body>     <input type="text" id="input" class="input" value="" />     <div id="main" class="main">         <div id="header">main</div>         <div id="global1" class="global">             global1             <div id="small11" class="small">aaaaaa</div>             <div id="small12" class="small">aaabaa</div>             <div id="small13" class="small">aaacaa</div>             <div id="small14" class="small">aaadaa</div>             <div id="small15" class="small">aaaeaa</div>         </div>         <div id="global2" class="global">             global2             <div id="small21" class="small">abcdef</div>             <div id="small22" class="small">fedcba</div>             <div id="small23" class="small">facbde</div>             <div id="small24" class="small">decfab</div>             <div id="small25" class="small">bacfed</div>         </div>         <div id="global3" class="global">             global3             <div id="small31" class="small">eeeeee</div>             <div id="small32" class="small">eabdc</div>             <div id="small33" class="small">bcdae</div>             <div id="small34" class="small">dcbea</div>             <div id="small35" class="small">eadcb</div>         </div>         <div id="global4" class="global">             global4             <div id="small41" class="small">decab</div>             <div id="small42" class="small">baced</div>             <div id="small43" class="small">becad</div>             <div id="small44" class="small">daceb</div>             <div id="small45" class="small">cedab</div>         </div>         <div id="global5" class="global">             global5             <div id="small51" class="small">cadeb</div>             <div id="small52" class="small">cadeb</div>             <div id="small53" class="small">cedab</div>             <div id="small54" class="small">eadcb</div>             <div id="small55" class="small">aebdc</div>         </div>     </div> </body> </html>

so if in input "user" enters: "aebdc" should change #small55 background-color yellow. if in input there an: "a" should change background-color of of divs. if none matches criteria, none changed.

you can filter based on text content of div

$('#input').on('input', function() {      var value = this.value;      $('.global div').css('background', '').filter(function() {         return $(this).text().indexof(value) !== -1;     }).css('background', 'red'); });

fiddle

if need case-insensitive search, add tolowercase both value , text.


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more