document.querySelector('.editButt').addEventListener('click', function(e) {

let tblData = e.target.previousElementSibling;

document.querySelector('#input_box').value = tblData.innerText;

}

const input = document.getElementById("search");

const results = document.getElementById("results");

​

input.addEventListener("input", function(event) {

  const query = event.target.value;

  if (query.length == 0) {

    results.innerHTML = "";

    return;

  }

​

  // fetch search results from a server or a local data source

  fetch(`/search?q=${query}`)

    .then(response => response.json())

    .then(data => {

      // display the search results as a list

      results.innerHTML = "";

      data.forEach(result => {

        const li = document.createElement("li");

        li.textContent = result;

        results.appendChild(li);

      });

    });

});

​

// allow the user to navigate the list of search results using the arrow keys

input.addEventListener("keydown", function(event) {

  if (event.key == "ArrowDown") {

    const active = results.querySelector(".active");

    if (active) {

      active.classList.remove("active");

      active.nextSibling.classList.add("active");

    } else {

      results.firstChild.classList.add("active");

    }

  } else if (event.key == "ArrowUp") {

    const active = results.querySelector(".active");

    if (active) {

      active.classList.remove("active");

      active.previousSibling.classList.add("active");

    } else {

      results.lastChild.classList.add("active");

    }

  }

});

​

// update the value of the input field and close the list of results when the user selects a search result

results.addEventListener("mousedown", function(event) {

  input.value = event.target.textContent;

  results.innerHTML = "";

});

​

//A Click on edit button will autofill an input box with the associate table data

document.querySelector('.editButt').addEventListener('click', function(e) {

let tblData = e.target.previousElementSibling;

document.querySelector('#input_box').value = tblData.innerText;

}

Download VSCode