my table contains many columns and numerous entries. I am filtering the table with the help of a code, but filter results many searched words containing all those characters in them. For example:- If I enter 'ab' in textbox it filter the table record with strings contains the keyword 'ab' like abcd, babe, cfab, dkabh etc. But my requirement is when I enter the keyword 'ab' in textbox it should osearch only those string which starts from 'ab' like abcd, abdc etc. etc. Can someone, amend the following code, thanks...

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

my table contains many columns and numerous entries. I am filtering the table with the help of a code, but filter results many searched words containing all those characters in them. For example:- If I enter 'ab' in textbox it filter the table record with strings contains the keyword 'ab' like abcd, babe, cfab, dkabh etc. But my requirement is when I enter the keyword 'ab' in textbox it should osearch only those string which starts from 'ab' like abcd, abdc etc. etc. Can someone, amend the following code, thanks...

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

• javascript
• html

• What does your code currently do? i.e. what needs to be fixed? – Bravo Commented Feb 16 at 2:07
• it retrieves/filters data from first column i,e. td of able. It should only filter the record beginning with the first character of a searched word. like for "Bruno", it may filter only words with B etc etc. – M.Rono Commented Feb 16 at 2:10
• You are using a lot of getElementById() / getElementByName(). Consider using XPath instead. This allow you get collection of elements you need in just a few lines. Here is the docs: developer.mozilla./en-US/docs/Web/API/Document/evaluate – user882813 Commented Feb 16 at 2:27
• it retrieves/filters data ... etc etc - and in what way does your code not produce the result you are looking for? Sounds like you are describing code that does what you want – Bravo Commented Feb 16 at 4:54
• You want all the entries that start from the keyword or just one? It's not clear from your quesion. – Lubomyr Pryt Commented Feb 16 at 17:28

2 Answers 2

The simplest change to your existing code, is to test for indexOf() to return 0 instead of > -1

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      // EDIT Check for match at beginning of string
      // if (txtValue.toUpperCase().indexOf(filter) > -1) {
      if (txtValue.toUpperCase().indexOf(filter) == 0) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<input id="myInput" oninput="myFunction()">

<table id="myTable">
  <tr>
    <td>One Twelve </td>
    <td>123</td>
  </tr>
  <tr>
    <td>Two Five</td>
    <td>456</td>
  </tr>
  <tr>
    <td>Three</td>
    <td>789</td>
  </tr>
  <tr>
    <td>Four Tree</td>
    <td>066</td>
  </tr>
</table>

you may simply use a regular expression for this see RegExp.prototype.test()

sample code :

const
  myForm = document.querySelector('#my-form')
, tData  = document.querySelector('#my-table tbody')
  ;
myForm.onsubmit = e =>
  {
  e.preventDefault()
    ;
  for( let row  of tData.rows )       // show all
    row.classList.remove('noDisplay')
    ;
  try
    {
    let rExp = new RegExp(`^${myForm.search_string.value.trim()}`,'i')
      ;
    for ( let row of tData.rows )
      {
      let found = false
        ;  
      for ( let cell of row.cells )
        found ||= rExp.test(cell.innerText)
        ;
      row.classList.toggle('noDisplay', !found );
      }
    }
  catch(_) // remove bad input...
    {
    myForm.search_string.value = '';
    }
  }

html   { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
table  { border-collapse: collapse;margin: 2em 1em; }
td     { padding: .2em .8em; border: 1px solid darkblue; }
thead  { background: #9bbad8; }
.noDisplay 
  { 
  display : none;  
  }

<form id="my-form">
  <input type="text" placeholder="use '*' to show all" name="search_string" required >
  <button>search</button>
</form>
<table id="my-table">
  <thead>
    <tr><td>first_name</td><td>last_name</td><td>company_name</td></tr>
  </thead>
  <tbody>
    <tr><td> James     </td><td> Butt      </td><td> Benton                    </td></tr>
    <tr><td> Josephine </td><td> Darakjy   </td><td> Chanay                    </td></tr>
    <tr><td> Ben       </td><td> Venere    </td><td> Chemel                    </td></tr>
    <tr><td> Lenna     </td><td> Paprocki  </td><td> Feltz Printing Service    </td></tr>
    <tr><td> Donette   </td><td> Foller    </td><td> Printing Dimensions       </td></tr>
    <tr><td> Simona    </td><td> Morasca   </td><td> Chapman                   </td></tr>
    <tr><td> Mitsue    </td><td> Tollner   </td><td> Morlong Associates        </td></tr>
    <tr><td> Leota     </td><td> Dilliard  </td><td> Commercial Press          </td></tr>
    <tr><td> Sage      </td><td> Wieser    </td><td> Truhlar And Truhlar Attys </td></tr>
    <tr><td> John      </td><td> Marrier   </td><td> King                      </td></tr>
    <tr><td> Minna     </td><td> Amigon    </td><td> Dorl                      </td></tr>
    <tr><td> Abel      </td><td> Maclead   </td><td> Rangoni Of Florence       </td></tr>
    <tr><td> Kiley     </td><td> Caldarera </td><td> Feiner Bros               </td></tr>
  </tbody>
</table>