[ANSWERED] javascript – Show result if contains searched words ,Irrespective of arrangement of words searched

Question 1

Loop over the search terms and check them each individually. No need for regex.

I would also question whether you really need jQuery; this code would have been just as easy to write without it and it’s then more flexible.

$(document).ready(function() {
  (function($) {
    $('#filter').keyup(function() {
      var terms = this.value.split(' ');
      $('.searchable tr').hide();
      $('.searchable tr').filter(function() {
        for (var term of terms) {
          if (this.textContent.indexOf(term) < 0) return false;
        }
        return true;
      }).show();
    })
  }(jQuery));
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<input id="filter" type="search" placeholder="Search">
<table>
  <tbody class="searchable">
    <tr>
      <td>love and dance </td>
      <td> something else</td>
    </tr>
    <tr>
      <td>play and eat </td>
      <td></td>
    </tr>
    <tr>
      <td>love and roll </td>
      <td></td>
    </tr>
  </tbody>
</table>

Question 2

You can use the javascript includes() function to check if your string is a substring of the text.

$(document).ready(function() {
  (function($) {
    $('#filter').keyup(function() {
      var filterText = $(this).val();
      $('.searchable tr').hide();
      $('.searchable tr').filter(function() {
        return $(this).text().includes(filterText)
      }).show();
    })
  }(jQuery));
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<input id="filter" type="search" placeholder="Search"></form>
<table>
  <tbody class="searchable">
    <tr>
      <td>love and dance </td>
      <td> something else</td>
    </tr>
    <tr>
      <td>play and eat </td>
      <td></td>
    </tr>
    <tr>
      <td>love and roll </td>
      <td></td>
    </tr>
  </tbody>
</table>

Question 3

I would like to have a table which has words included in td. I am wondering if there is any way that search result shown irrespective of the way user searched. for example td contains ” love and dance and sing ” but the code that I have show result only when user types “love and dance and sing ” . If user type “dance and love” it doesn’t show.I want to show result irrespective of arrangement of words,
ie , if user types “sing and dance” or dance and love” result should show up.

Any help would be really appreciated. Thanks in Advance

Here is my code

$(document).ready(function() {

  (function($) {

    $('#filter').keyup(function() {

      var rex = new RegExp($(this).val(), 'i');
      $('.searchable tr').hide();
      $('.searchable tr').filter(function() {
        return rex.test($(this).text());
      }).show();

    })

  }(jQuery));

});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<input id="filter" type="search" placeholder="Search"></form>
<table>
  <tbody class="searchable">
    <tr>
      <td>love and dance </td>
      <td> something else</td>
    </tr>
    <tr>
      <td>play and eat </td>
      <td></td>
    </tr>
    <tr>
      <td>love and roll </td>
      <td></td>
    </tr>
  </tbody>
</table>

Bollate

[ANSWERED] javascript – Show result if contains searched words ,Irrespective of arrangement of words searched

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by David Becckam

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate