如何在Rails中使用我的javascript函数

I have a javascript function in my asset tree. It takes the input from the user and then filters a table of data by that input. However, I cannot get it to work in my index.html.erb file from my asset/javascript pipeline. I can put the function in script tags in the index.html.erb page and it will work. I can also put an alert("test") in my javascript file and it will work in index.html.erb. Can someone take a look and tell me what piece I am missing?

我的资产树中有一个javascript函数。它接收来自用户的输入，然后通过该输入过滤数据表。但是，我无法从我的asset / javascript管道中的index.html.erb文件中使用它。我可以将函数放在index.html.erb页面中的脚本标记中，它将起作用。我也可以在我的javascript文件中发出警报（“测试”），它将在index.html.erb中运行。有人可以看看，告诉我我错过了什么？

// # Place all the behaviors and hooks related to the matching controller here.
$('document').ready(function(){
  var stateInput, stateFilter, table, tr, td, i;
  stateInput = document.getElementById("stateInput");
  stateFilter = stateInput.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

 // Loop through all table rows, and hide those who don't match the search query
  function stateSearch() {
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(stateFilter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
}); 

Here is my index.html.erb. I only include the input tag because I am assuming it's all you need.

这是我的index.html.erb。我只包含输入标签，因为我假设它是你所需要的。

<input id="stateInput" type="textbox" placeholder="State ID ex. IN" onkeyup="stateSearch()">

1 个解决方案

#1

Try something like this:

尝试这样的事情：

(function ($) {
    
      stateSearch = function() {
        alert( "stateSearch called." );
        // write your logic here
      }
    }) (jQuery);
    
    $('document').ready(function() {
      var myTextBox = $("#stateInput");
    
      myTextBox.on('change', function() {
        stateSearch();
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="stateInput"/>