I am not getting the last line after $toggle please explain to me what is the use of .indexOf(value) in this line.

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

I am not getting the last line after $toggle please explain to me what is the use of .indexOf(value) in this line.

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

• javascript
• jquery

• this is the actual code $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); – UI Developer Nepal Commented Jan 13, 2018 at 8:30
• 2 Please use the edit link below your question in order to add the code directly into the question. In the ments section it is basically unreadable. – honk Commented Jan 13, 2018 at 8:32

3 Answers 3

You want to know what .indexOf(value) is doing?

From the documentation: String.prototype.indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.

In this particular code snippet, value is whatever has been typed into #myInput, so indexOf(value) returns the index of whatever has been entered into #myInput

Now on the last line a toggle is called on the condition indexOf(value) > -1, so the rows in the table will be hidden if they do not contain the user's input.

The toggle function can take a Boolean to decide whether to show or hide the selected element. This code:

$(this).text().toLowerCase().indexOf(value) > -1

merely resolves to either true or false.

if you wanted to know about $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) line, then you have to understand from the below section with some steps, then maybe it will be much clear to you. ( sorry to take long description)

Step 1:

 $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });

Here

$("#myTable tr").filter(function() {
...
});

is checking every each row of #myTable table.

Step 2:

$(this).text().toLowerCase() is every time collecting all columns data from a row as lower case a large string.

Example: You can find out using the below code

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      alert($(this).text().toLowerCase());
    });
  });
});

Step 3:

indexOf(value) is a method to search the position of the given value from a string.

Example:

var str = "Hello world, wele to the universe.";
var n = str.indexOf("wele");

https://www.w3schools./jsref/tryit.asp?filename=tryjsref_indexof

So whatever you search into #myInput , its searches his position from $(this).text().toLowerCase() lower case large string using $(this).text().toLowerCase().indexOf(value) and returns the actual location or if he could not matched or find out then returns -1 . Which is checking into below line

$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

Step 4:

Finally $(this).toggle is called on the condition indexOf(value) > -1, so the rows in the table will be hidden if they do not match with the user's searchable input.

Some use full links :

indexOf: https://www.w3schools./jsref/tryit.asp?filename=tryjsref_indexof

toggle: https://www.w3schools./jquery/eff_toggle.asp