Как найти любое слово и выделить его, не используя кнопку?

Question

У меня есть функция поиска, которая ищет все введенные слова.функция будет запущена, если нажата кнопка поиска, я сделал функцию для нее в коде ниже.я хочу сделать поиск без использования кнопки, такой как поиск в реальном времени.есть идеи для этого?спасибо

<style>
 #search_para {
  color: grey;
 }
 .highlight {
   background-color: yellow;
 }
</style>
<div id="wrapper">
  <input type="text" id="search_text">
  <input type="button" value="search" id="search">
</div>
<div id="inputText1">
   <ul>
        @Html.ActionLink("Form User", "Index", "User", null, new { @class = "btn btn-primary" })
        @Html.ActionLink("Form Role", "Index", "Role", null, new { @class = "btn btn-primary" })
        @Html.ActionLink("Form Transaction", "Index", "Transaction", null, new { @class = "btn btn-primary" })        
   </ul>
</div>
<script>
     document.addEventListener('DOMContentLoaded', function () {
          var searchpara = document.getElementById("inputText1").innerHTML;
          searchpara = searchpara.toString();
          document.getElementById("search").onclick = function () { highlight_word(searchpara) };
                }, false);

     function highlight_word(searchpara) {
          var text = document.getElementById("search_text").value;
          if (text) {
                var pattern = new RegExp("(" + text + ")", "gi");
                var new_text = searchpara.replace(pattern, "<span class='highlight'>" + text + "</span>");
                document.getElementById("inputText1").innerHTML = new_text;
           }
      }
</script>

Answer 1

Вы можете использовать onkeyup

Это будет выглядеть

document.getElementById("search_text").onkeyup = function() {
  highlight_word(searchpara)
};

Рабочая демоверсия

document.addEventListener('DOMContentLoaded', function() {
  var searchpara = document.getElementById("inputText1").innerHTML;
  searchpara = searchpara.toString();
  document.getElementById("search_text").onkeyup = function() {
    highlight_word(searchpara)
  };
}, false);

function highlight_word(searchpara) {
  var text = document.getElementById("search_text").value;
  if (text) {
    var pattern = new RegExp("(" + text + ")", "gi");
    var new_text = searchpara.replace(pattern, "<span class='highlight'>" + text + "</span>");
    document.getElementById("inputText1").innerHTML = new_text;
  }
}

#search_para {
  color: grey;
}

.highlight {
  background-color: yellow;
}

<div id="wrapper">
  <input type="text" id="search_text">
</div>
<div id="inputText1">
  <ul>
    @Html.ActionLink("Form User", "Index", "User", null, new { @class = "btn btn-primary" }) @Html.ActionLink("Form Role", "Index", "Role", null, new { @class = "btn btn-primary" }) @Html.ActionLink("Form Transaction", "Index", "Transaction", null, new {
    @class = "btn btn-primary" })
  </ul>
</div>