動態過濾html表中的搜索結果

我想從我的json文件中顯示錶中的所有行，並使用輸入框通過Regex搜索動態過濾和顯示行。我的代碼使用相同的搜索結果填充所有行，而不是最小化行以滿足搜索。我需要一些關於如何前進的幫助。我嘗試了不同的變化，但無濟於事。動態過濾html表中的搜索結果

這裏是我的JSON文件：

[ 
    { 
     "Client_ID":"100", 
     "FirstName":"Nancy", 
     "LastName":"Rivera", 
     "SSNumber":"5555", 
     "BirthDate":"1976-05-05", 
     "Address":"555 Flatlands Ave", 
     "Phone":"718-555-5555", 
     "Email":"[email protected] mycomp.com" 
    }, 
    { 
     "Client_ID":"200", 
     "FirstName":"Mary", 
     "LastName":"Johnson", 
     "SSNumber":"4444", 
     "BirthDate":"1974-04-04", 
     "Address":"444 Jay Street", 
     "Phone":"718-444-4444", 
     "Email":"[email protected] mycomp.com" 
    }, 
    { 
     "Client_ID":"300", 
     "FirstName":"Sam", 
     "LastName":"Peterson", 
     "SSNumber":"3333", 
     "BirthDate":"1973-03-03", 
     "Address":"333 Dekalb Ave", 
     "Phone":"718-333-3333", 
     "Email":"[email protected] mycomp.com" 
    }, 
    { 
     "Client_ID":"400", 
     "FirstName":"Angel", 
     "LastName":"Rodriguez", 
     "SSNumber":"2222", 
     "BirthDate":"1972-02-02", 
     "Address":"222 Flatbush Ave", 
     "Phone":"718-222-2222", 
     "Email":"[email protected] mycomp.com" 
    }, 
    { 
     "Client_ID":"500", 
     "FirstName":"Joel", 
     "LastName":"Smiles", 
     "SSNumber":"9999", 
     "BirthDate":"1971-01-01", 
     "Address":"Sappy St", 
     "Phone":"718-888-8888", 
     "Email":"[email protected]" 
    } 
]

而且我的代碼：

<div id = "update"></div> 
         (function($) { 


         $.getJSON("myjson.js", function(data) { 
           var output2 = '<table class="gridtable" border="1" cellpadding="10">'; 
           output2 += '<tr>'; 
           output2 += '<td><input type="search" name="search" id="search" placeholder="ID" /></td>'; 
           output2 += '<td><input type="search" name="search" id="search2" placeholder="First name" /></td>'; 
           output2 += '<td><input type="search" name="search" id="search3" placeholder="Last name" /></td>'; 
           output2 += '<tr>'; 
           output2 += '<tr><th>ID</th><th>First Name</th><th>Last Name</th></tr>'; 
          $.each(data, function(key, val) { 

           output2 += '<tr class="myRows">'; 
           output2 += '<td>'+ val.Client_ID +'</td>'; 
           output2 += '<td>'+ val.FirstName +'</td>'+ '<td>' + val.LastName +'</td>'; 

           output2 += '</tr>'; 

          }); 
          $('#update').html(output2); 

          $('#search').keyup(function() { 

           var searchField = $('#search').val(); 
           var myExp = new RegExp(searchField, "i"); 

           $.getJSON("myjson.js", function(data) { 

            $.each(data, function(key, val) { 
             if ((val.FirstName.search(myExp) != -1) || 
              (val.LastName.search(myExp) != -1)) { 

              the_output = '<td>'+ val.Client_ID +'</td>'; 
              the_output += '<td>'+ val.FirstName +'</td>'+ '<td>' + val.LastName +'</td>'; 
             } 
            }); 

            $('.myRows').html(the_output); 
           }); //get JSON 

          }); 
         }); //get JSON 
      })(jQuery);

來源

2015-06-25 Addy75

第二次調用'$ .getJSON（「myjson.js」''的目的是什麼？ – guest271314

我的想法是在頁面初始加載時獲取json，然後再次使用get json再次迭代，但是這次通過keyup事件通過正則表達式發送它。我知道有更好的方法，但我還是無法弄清楚。 – Addy75

查看https://jqueryui.com/resources/demos/autocomplete/remote-with-cache.html – guest271314

給各行的類：

<tr class="row">

在事件其中一個搜索框的變化，你想遍歷每一行，並根據搜索條件是否滿足來更改可見性：

var rows = document.getElementsByClassName("row"); 
for (var i = 0; i < rows.length; ++i) { 
    if (/* should be visible */) 
     rows[i].style.display = "inherit"; 
    else 
     rows[i].style.display = "none"; 
}

來源

2015-06-25 02:51:03 Luke

動態過濾html表中的搜索結果

回答

相關問題