How to highlight relevant range of number based on input value using javascript?

Question

I would like to develop an input box with a list of numbers beside and when I enter a number into the input field the javascript/jquery code(I don't know which one would be better solution) highlight(colorize or make it bold style) "live" that list element regarding where to fit the given number.

Here is the example:

Input box with value selector

are the numbers on right always the same gap? if so you can take the value from input and do (x -1)/10, for 1 to 10 you get 0, 11 to 20 you get 1, etc. and set the id of lists from 0 to some number, then just select by id to highlight. — Chris Li
– Chris Li, Commented Sep 8, 2018 at 8:31
I don't have any code yet just planning to make this works. But if you have any usable code snippet to start it or make it done I would appreciate for it. Thanks. — user10333892
– user10333892, Commented Sep 8, 2018 at 8:33
@ChrisLi Do you have any code for it so I can check how it works? — user10333892
– user10333892, Commented Sep 8, 2018 at 8:35
@tradingjonah I made a jsfiddle here jsfiddle.net/Lb7jap3c/7 — Chris Li
– Chris Li, Commented Sep 8, 2018 at 8:47

Mohammad · Accepted Answer · 2018-09-08 10:03:11Z

4

Use jquery keyup event to running code when key upped on input. In event listener use select all li element contain range values and use .filter() to filtering values.

In function check if value of input is in range then return true to selecting target li.

$(".number-val").keyup(function(){
    var value = this.value;
    $(".number-list li").css("color", "").filter(function(){
        var parts = $(this).text().split("-");    
        return (parseInt(parts[0]) <= value && value <= parseInt(parts[1])) 
    }).css("color", "lightgreen");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>input field of number</p>
<input type="number" class="number-val">
<ul class="number-list">
  <li>1-10</li>
  <li>11-20</li>
  <li>21-40</li>
  <li>41-50</li>
  <li>51-60</li>
  <li>61-80</li>
  <li>81-100</li>
  <li>101-110</li>
</ul>

If you want to highlight last number if input value is greater than it, use bottom code:

$(".number-val").on("keyup", function(){
    var value = this.value;
    $(".number-list li").css("color", "").filter(function(){
        var parts = $(this).text().split("-"); 
        parts[1] == "" ? parts[1] = Number.MAX_SAFE_INTEGER : "";
        return (parseInt(parts[0]) <= value && value <= parseInt(parts[1])) 
    }).css("color", "lightgreen");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>input field of number</p>
<input type="number" class="number-val">
<ul class="number-list">
  <li>1-10</li>
  <li>11-20</li>
  <li>21-40</li>
  <li>41-50</li>
  <li>51-60</li>
  <li>61-80</li>
  <li>81-100</li>
  <li>101-</li>
</ul>

edited Sep 8, 2018 at 10:03

answered Sep 8, 2018 at 8:54

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user10333892 Over a year ago

Thank you, it looks great. Is it possible to modify the code if I would like to highlight the last one list element if the input number is bigger than 110?

user10333892 Over a year ago

Thank you, it is a great, simple code ;) Can you please help to modify the code because if I would like to use the last list element like "101+" the highlighter doesnt works above 101.

Mohammad Over a year ago

@tradingjonah Check last part of answer and click on Show code snippet. It show code snippet for +101

Som · Accepted Answer · 2018-09-14 04:59:14Z

Try The following For table

 $(document).on('keyup','#user-count',function(){
            var SearchedNumber=parseInt($('#user-count').val());
            var Number=$('#user-table tr:not(:first) td:first-child');
            var AllTr=$('#user-table tr:not(:first)');
            var TableBody='';            
            var maxCount= AllTr[AllTr.length-1].innerText.trim().split('+')[0];//get max Count of your Number list
            $('#user-table tbody').empty();
            $.each(Number,function(i,TD){
            var Text=TD.innerText.trim().split('-');
             if(SearchedNumber>=maxCount)//compare max Count
                    {
                    	if(i==AllTr.length-1)
                        {
                        TableBody+='<tr style="background-color:#4caf50;font-size:20px"><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td></tr>';
                        }
                        else
                        {
                         TableBody+='<tr><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td></tr>';
                        }
                    }
                    else                    
                    {
                     if(SearchedNumber>=Text[0] && SearchedNumber<=Text[1])
            			{
                   		 TableBody+='<tr style="background-color:#4caf50;font-size:20px"><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td></tr>';
            			}
            			else
            			{
                     	TableBody+='<tr><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td></tr>';
           				 }
                    }       
            });
            $('#user-table tbody').append(TableBody);
        });

.table-striped tbody tr:nth-of-type(even) {
    background-color: #ddd;
    font-weight: 600;
    font-size: 20px;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0);
    font-weight: 600;
    font-size: 20px;
}

.table-striped thead {
    background-color: #f1f1f1;
    border-bottom: 2px solid #c0c0c0;
    border-top: 2px solid #c0c0c0;
    color: #404040;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="row">
                    <div class="col-md-8 text-right mt-4">
                      <h5 class="text-center">Users table</h5>
                    </div>
                    <div class="col-md-4 mt-4">
                      <form class="">
                        <div class="form-group">
                        <center><input type="number" id="user-count"/></center>
                        </div>
                      </form>
                    </div>
                  </div>
                  <div class="row mt-5 mb-5">
                    <div class="col-md-12">
                      <table class="table table-striped" id="user-table">
                        <thead class="table-striped">
                          <tr>
                            <th>User Count</th>
                            <th class="text-center">Price</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>0-1</td>
                            <td class="text-center">$1000</td>
                          </tr>
                          <tr>
                            <td>2-40</td>
                            <td class="text-center">$2000</td>
                          </tr>
                          <tr>
                            <td>41-250</td>
                            <td class="text-center">$3000</td>
                          </tr>
                          <tr>
                            <td>251+</td>
                            <td class="text-center">$4000</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>

Riccardo Volpe · Accepted Answer · 2018-09-08 09:43:35Z

Test it:

$( document ).ready(function() {
  $("#number").change(function(){
    var entry = $("#number").val();
    if ( entry < 0 ) {
      $( ".entry" ).remove();
      $( ".0_minus" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 0 <= entry && entry <= 9 ) {
      $( ".entry" ).remove();
      $( ".0_9" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 10 <= entry && entry <= 19 ) {
      $( ".entry" ).remove();
      $( ".10_19" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 20 <= entry && entry <= 29 ) {
      $( ".entry" ).remove();
      $( ".20_29" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 30 <= entry && entry <= 39 ) {
      $( ".entry" ).remove();
      $( ".30_39" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 40 <= entry && entry <= 49 ) {
      $( ".entry" ).remove();
      $( ".40_49" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 50 <= entry && entry <= 59 ) {
      $( ".entry" ).remove();
      $( ".50_59" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 60 <= entry && entry <= 69 ) {
      $( ".entry" ).remove();
      $( ".60_69" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 70 <= entry && entry <= 79 ) {
      $( ".entry" ).remove();
      $( ".70_79" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 80 <= entry && entry <= 89 ) {
      $( ".entry" ).remove();
      $( ".80_89" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( 90 <= entry && entry <= 99 ) {
      $( ".entry" ).remove();
      $( ".90_99" ).append( "<span class='entry'>"+entry+"</span>" );
    } else if ( entry >= 100 ) {
      $( ".entry" ).remove();
      $( ".100_plus" ).append( "<span class='entry'>"+entry+"</span>" );
    }
  });
});

body {
  color: #1a1a1a;
}
.entry {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <legend>Demo</legend>
  <label for="height">Number entry:</label>
  <input type="number" id="number" name="Number"
         placeholder="Enter your number..." step="1" />
  <ul>
    <li class="0_minus">Minus 0: </li>
    <li class="0_9">0 - 9: </li>
    <li class="10_19">10 - 19: </li>
    <li class="20_29">20 - 29: </li>
    <li class="30_39">30 - 39: </li>
    <li class="40_49">40 - 49: </li>
    <li class="50_59">50 - 59: </li>
    <li class="60_69">60 - 69: </li>
    <li class="70_79">70 - 79: </li>
    <li class="80_89">80 - 89: </li>
    <li class="90_99">90 - 99: </li>
    <li class="100_plus">100 plus: </li>
  </ul>
</fieldset>

Som · Accepted Answer · 2018-09-08 09:54:37Z

0

Try This which will show highlight if entered number is greater than max list number

 $(document).on('keyup keydown','#txtNumber',function(){
  	    var Number=parseInt($('#txtNumber').val());
            var allLi=$('#TestList').find('li');
            $('#TestList').empty();
            var UlBody='';
           var maxCount= allLi[allLi.length-1].innerText.trim().split('-')[0];//get max Count of your Number list
            $.each(allLi,function(i,Li){
            		var Text=Li.innerText.trim().split('-');
                    if(Number>=maxCount)//compare max Count
                    {
                    	if(i==allLi.length-1)
                        {
                        UlBody+='<li style="color:#4caf50;font-weight: bold;font-size:20px;">'+Li.innerText+'</li>';
                        }
                        else
                        {
                        UlBody+='<li>'+Li.innerText+'</li>';
                        }
                    }
                    else                    
                    {
                     if(Number>=Text[0] && Number<=Text[1])
                    {
                    	UlBody+='<li style="color:#4caf50;font-weight: bold;font-size:20px;">'+Li.innerText+'</li>';
                    }
                    else 
                    {
                    	UlBody+='<li>'+Li.innerText+'</li>';
                    }
                    }                       
            });
            $('#TestList').append(UlBody);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="txtNumber" />

<ul id="TestList" style="list-style-type:none">
  <li>1-10</li>
  <li>11-20</li>
  <li>21-40</li>
    <li>41-50</li>
  <li>51-60</li>
  <li>61-80</li>
  <li>81-Plus</li>
</ul>

edited Sep 8, 2018 at 9:54

answered Sep 8, 2018 at 9:14

Som

5983 silver badges12 bronze badges

3 Comments

user10333892 Over a year ago

Thanks for the solution. Is it possible to modify the code if I would like to highlight the last one list element if the input number is bigger than 81? So the last list element would be 81+

user10333892 Over a year ago

Can you please help to modify the code because if I would like to use the last list element like "81+" the highlighter doesnt works above 81. And what do you think could it be work with tables? Thanks!

Som Over a year ago

yes it will be work with table i will post new answare for the table ok

Som · Accepted Answer · 2018-09-10 06:19:51Z

0

Try Following Code For The table

$(document).on('keyup','#txtNumber',function(){
    debugger;
  	    var SearchedNumber=parseInt($('#txtNumber').val());
            var Number=$('#TestTable tr:not(:first) td:first-child');
            var AllTr=$('#TestTable tr:not(:first)');
            var TableBody='';
            $('#TestTable tbody').empty();
            $.each(Number,function(i,TD){
            debugger;
            var Text=TD.innerText.trim().split('-');
            if(SearchedNumber>=Text[0] && SearchedNumber<=Text[1])
		    {
                    TableBody+='<tr style="background-color:#4caf50;font-size:20px"><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td><td>'+$(AllTr[i]).find('td')[2].innerText+'</td></tr>'; 
        	}
            else
            {
            		 TableBody+='<tr><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td><td>'+$(AllTr[i]).find('td')[2].innerText+'</td></tr>'; 
            }
            });   
            $('#TestTable tbody').append(TableBody);   
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" id="txtNumber"/>
<br/><br/>
<table border="1" id="TestTable">
<thead>
<tr>
<td>Number</td>
<td>Heading1</td>
<td>Heading2</td>
</tr>
</thead>
<tbody>
<tr>
<td>0-10</td>
<td>1</td>
<td>Mumbai</td>
</tr>
<tr>
<td>11-20</td>
<td>2</td>
<td>Pune</td>
</tr>
<tr>
<td>21-40</td>
<td>3</td>
<td>Navi Mumbai</td>
</tr>
<tr>
<td>51-60</td>
<td>4</td>
<td>Panvel</td>
</tr>
</tbody>
</table>

answered Sep 10, 2018 at 6:19

Som

5983 silver badges12 bronze badges

3 Comments

user10333892 Over a year ago

Thanks for the code. If I trying to use it with bootstrap table and insert a number in the input field all the rows are disapper from the table. What can cause this issue?

user10333892 Over a year ago

Here is my code and if you put a number in the input box the table content will disappear. jsfiddle.net/wLnms9dp/16

Som Over a year ago

there is simple error While Creating a TableBody ,In that variable u creating 3 <td>& in your table there is only 2 <td> See the answare i Posting now

Som · Accepted Answer · 2018-09-10 06:23:22Z

Try This for highlighter doesnt works above last Number

   $(document).on('keyup keydown','#txtNumber',function(){
  	    var Number=parseInt($('#txtNumber').val());
            var allLi=$('#TestList').find('li');
            $('#TestList').empty();
            var UlBody='';
            $.each(allLi,function(i,Li){
            		var Text=Li.innerText.trim().split('-');
                    	if(Number>=Text[0] && Number<=Text[1])
                        {
                        UlBody+='<li style="color:#4caf50;font-weight: bold;font-size:20px;">'+Li.innerText+'</li>';
                        }
                        else
                        {
                        UlBody+='<li>'+Li.innerText+'</li>';
                        }                         
            });
            $('#TestList').append(UlBody);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="txtNumber" />

<ul id="TestList" style="list-style-type:none">
  <li>1-10</li>
  <li>11-20</li>
  <li>21-40</li>
    <li>41-50</li>
  <li>51-60</li>
  <li>61-81</li>
</ul>

Collectives™ on Stack Overflow

How to highlight relevant range of number based on input value using javascript?

6 Answers 6

3 Comments

Comments

Comments

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related