Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Retrieving Data from a Table

I have a table with ID ‘myTable’ and an input Box ID ‘Search’. Normally I type some text into input Text box and retrieve relevant data from the table. The code is working fine, the moment i type any value in input text box, the code responds and gives the desired result without even hitting the Enter Key. But when I select any desired value from the TD (which is normally a word from a sentence), copy the same value and paste it into text box, the code does not respond until and unless the input box is: autofocused by clicking into it; and then entering the Enter/Return Key. Apart from typing of desired value from a sentence of td (as i am presently doing), I wish to paste it into input box with a mouse Click, get the input box populated/autofocused and Enter Key entered into it simultaneously/automatically instead of doing it manually. Will appreciated it the desired code is amended accordingly. thanks n sorry if not being so clear.

const trs = document.getElementById("myTable").getElementsByTagName("tr");
document.getElementById("search").onkeyup = e => {
  for (const tr of trs) tr.style.display = tr.innerText.toLowerCase().includes(e.target.value.toLowerCase()) ? "" : "none";
}
body {
  padding: 20px;
}

input {
  margin-bottom: 5px;
  padding: 2px 3px;
  width: 209px;
}

td {
  padding: 4px;
  border: 1px #CCC solid;
  width: 100px;
}
<!DOCTYPE HTML>
<HTML>

<HEAD>
  <Meta charset="utf-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1">


</HEAD>

<TITLE>Equipments Details</TITLE>


<BODY style="margin-top: 0px; margin-left: 20px; margin-right: 10px;">


  <input type="text" id="search" placeholder="Type to search">




  <table id="table">
    <tr>
      <td>Chairs and Pedals</td>
      <td>ہمارے پاس</td>
      <td>افلا</td>
    </tr>
    <tr>
      <td>Tools plus Kits</td>
      <td>آج کے دن</td>
      <td>یجعلون</td>
    </tr>
    <tr>
      <td>Tractors with Carts</td>
      <td>ٹریکٹرز بمعہ سامان</td>
      <td>اَلْھ</td>
    </tr>
  </table>

If I type manually the word like Chairs or Tools in text box, the code works. Instead of typing manually, I wish to click any word from a TD of table , the input box may be populated and code executed accordingly. thanks

Tags:

2

Answers


  1. 0

    You should listen to the input & change event instead of the keyup event. This approach ensures that the functionality works even when text is pasted from the clipboard, as shown below:

    document.getElementById("search").addEventListener("input", filterRows);
document.getElementById("search").addEventListener("change", filterRows);

function filterRows(e) {
    const query = e.target.value.toLowerCase();
    for (const tr of trs) {
        tr.style.display = tr.innerText.toLowerCase().includes(query) ? "" : "none";
    }
}

    To better capture additional fallback events, consider reviewing this answer. It provides a detailed description of the most important events you need to know. Check it out:

    https://stackoverflow.com/a/74435525/5701662

    Login or Signup to reply.
  2. 0

    Just add an event listener for the table and use the value of the clicked <td> to do the same thing that you are already doing with the search input.

    Now when you click on a table entry, the table is redrawn without user interaction with the search input.

    Note that your code was using a different id for the table in the HTML versus the JavaScript.

    const table = document.getElementById("myTable")
const trs   = table.getElementsByTagName("tr");
const search = document.getElementById("search")

table.addEventListener( "click", event =>  {
  if( event.target.tagName == "TD" ) {
    let data = event.target.innerText
    search.value = data
    limitTableEntries( data )
  }
} )

function limitTableEntries( data ) {
  for (const tr of trs)
  tr.style.display = tr.innerText.toLowerCase().includes(data.toLowerCase()) ? "" : "none";
}

document.getElementById("search").onkeyup = e => {
  limitTableEntries( e.target.value )
}
    input {
  margin-bottom: 5px;
  padding: 2px 3px;
  width: 209px;
}

td {
  padding: 4px;
  border: 1px #CCC solid;
  width: 100px;
}
    <input type="text" id="search" placeholder="Type to search">

<!-- EDIT Changed id to match id used in js -->
<!-- <table id="table"> -->
<table id="myTable">
  <tr>
    <td>Chairs and  Pedals</td>
    <td>ہمارے پاس</td>
    <td>افلا</td>
  </tr>
  <tr>
    <td>Tools plus Kits</td>
    <td>آج کے دن</td>
    <td>یجعلون</td>
  </tr>
  <tr>
    <td>Tractors with Carts</td>
    <td>ٹریکٹرز بمعہ سامان</td>
    <td>اَلْھ</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search