在文本框的keyup事件中的Html表內搜索文本

我使用asp.net mvc 5與jquery的bootstrap.js來構建項目。在文本框的keyup事件中的Html表內搜索文本

在其中的一個頁面中，我生成了一些動態HTML，這是一個包含員工列表的HTML表格。

我在用下面的代碼搜索內容。

它在文本框的按鍵事件上被調用。

jQuery的文件refernced這裏：

@Scripts.Render("~/bundles/jquery")

事件記錄在：

$(function(){ 
     $('#txtFilter').keyup(function(){ 
      FilterData(); 
     }); 
    });

標記：

<div class="popHeader"> 
     Select Employee 
    </div> 
    <br> 
    <span>Filter:<input id="txtFilter" type="text"></span> 
    <br><br> 
    <table id="tblSearch" class="table"> 
     <tbody><tr> 
      <th></th> 
      <th> 
       EmployeeId 
      </th> 
      <th> 
       Display Name 
      </th> 
      <th> 
       CurrentUsername 
      </th> 
     </tr> 
    <tr><td><a>Select</a></td><td>95961</td><td>Ankur</td><td>ankurda</td></tr><tr><td><a>Select</a></td><td>79761</td><td>Sameer </td><td>sameerba</td></tr><tr><td><a>Select</a></td><td>91060</td><td>Neeraj </td><td>Neerajsi</td></tr><tr><td><a>Select</a></td><td>83127</td><td>Pankaj </td><td>pankajpu</td></tr></tbody></table> 


function FilterData() 
    { 
     debugger; 
     var $rows = $('#tblSearch tr'); 


    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', 
     reg = RegExp(val, 'i'), 
     text; 

    $rows.show().filter(function() { 
     text = $(this).text().replace(/\s+/g, ' '); 
     return !reg.test(text); 
    }).hide(); 
}

每當我在文本框中鍵入一個字母我得到這個提示以下錯誤：。

Error:Microsoft JScript runtime error: Unable to get value of the property 'toLowerCase': object is null or undefined.

無法弄清楚什麼是錯的。

來源

2014-06-20 ankur

你是怎麼調用'FilterData（）'你應該傳遞'this'的引用。 –

錯誤代碼中的其他地方..因爲提供的代碼不包含'toLowerCase'函數調用..？ –

我知道沒有電話，它帶有jquery文件....你能建議嗎？ – ankur

刪除

@Scripts.Render("~/bundles/jquery")

並添加jquery的是這樣的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

然後嘗試使用以下。它可能會幫助你。

function FilterData() { 
     var rows = $('#tblSearch tbody tr'); 

     var val = $.trim($('#txtFilter').val()).replace(/ +/g, ' ').toLowerCase(); 

     rows.show().filter(function() { 
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
      return !~text.indexOf(val); 
     }).hide(); 
    } 
});

來源

2014-06-20 08:41:12 Azim

在文本框的keyup事件中的Html表內搜索文本

回答

相關問題