CODEWITHSUNDEEP
javascriptjqueryhtml
Adrian
Adrian

Reputation: 3062

How do I return a not found in filter function in jQuery?

I am searching a value through html table.

When I click a button, I am executing the code below:

var userinput = $(input).val();
$('table td').filter(function(){
  return $(this).text() == '654';
}).css('background-color', 'yellow');

<table>
  <tr>
    <td>654</td>
  </tr>
  <tr>
    <td>456</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
</table>

The code above works but I also want to know if there was no value returned OR the value does not exist inside one of the td in the table.

By the way, the value that is searched is dynamic.

Your help is appreciated. Thanks

Upvotes: 1

Views: 80

Answers (3)

Twisty
Twisty

Reputation: 30893

You can also mimic other functions like .indexOf().

function strInTable(t, str){
  $("tr", t).each(function(ind, el){
    if($("td", el).text().trim() == str){
      return ind;
    }
  }
  return -1;
}

var userStr = $(input).val();
var loc = strInTable($("table"), userStr);
if(loc >= 0){
  console.log("Query Found: '" + userStr + "', Row " + loc);
  $("table tr:eq(" + loc +")").css('background-color', 'yellow');
} else {
  console.log("Query Not Found: '" + userStr + ".);
}

If you get -1 the value is not found (false). If it is found, an integer is returned with the row index that the value was found.

$(function() {
  function strInTable(t, str) {
    console.log("Needle: " + str);
    var result = -1;
    $("tr", t).each(function(ind, el) {
      if ($("td", el).text().trim() == str) {
        console.log("Found Needle. Return: " + ind);
        result = ind;
      }
    });
    return result;
  }

  $("#search-form").submit(function(e) {
    e.preventDefault();
    var userStr = $("#user-input").val();
    var loc = strInTable($("table"), userStr);
    console.log("Search Result: " + loc);
    $("table tr").css("background", "");
    if (loc >= 0) {
      console.log("Query Found: '" + userStr + "', Row " + loc);
      $("table tr:eq(" + loc + ")").css('background-color', 'yellow');
    } else {
      console.log("Query Not Found: '" + userStr + "'.");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="search-form">
  Search: <input type="text" id="user-input" /><button type="submit" id="go-btn">Find</button>
</form>
<table>
  <tr>
    <td>654</td>
  </tr>
  <tr>
    <td>456</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
</table>

Hope that helps.

Upvotes: 1

Mamun
Mamun

Reputation: 68943

You can store the result returned by the filter() and check the length to determine if found or not:

var userinput = '654';
var resArr = $('table td').filter(function(){ 
  return $(this).text() == userinput;
}).css('background-color', 'yellow').get();
var token = resArr.length > 0 ? 'Found' : 'Not Found';
console.log(token);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>654</td>
  </tr>
  <tr>
    <td>456</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
</table>

You can attach input event to check each td like the following:

$('#txtInput').on('input', function(){
  $('td').css('background-color', '')
  var userinput = $(this).val();
  var resArr = $('table td').filter(function(){ 
    return $(this).text() == userinput;
  }).css('background-color', 'yellow').get();
  var token = resArr.length > 0 ? 'Found' : 'Not Found';
  console.clear();
  console.log(token);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="txtInput" placeholder="Enter to search"/>
<table>
  <tr>
    <td>654</td>
  </tr>
  <tr>
    <td>456</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
</table>

Upvotes: 2

ElusiveCoder
ElusiveCoder

Reputation: 1609

You can do it like this!

var userinput = $('input').val();
$('table td').filter(function(){
if($(this).text() == '654'){ 
  return $(this).text() == '654';
}
else {
  alert('Not Found');
}
}).css('background-color', 'yellow');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>652</td>
</tr>
<tr>
<td>456</td>
</tr>
<tr>
<td>123</td>
</tr>
</table>

Upvotes: 1

Related Questions