小贝子编程

通过表格行进行实时搜索



我想使用jQuery对表行进行实时搜索，"live"单词是关键，因为我想在同一站点的文本输入中键入关键字，我希望jQuery自动排序(或删除那些与搜索查询不匹配的(表行。

这是我的 HTML：

<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>214215</td><td>442</td></tr>
    <tr><td>1252512</td><td>556</td></tr>
    <tr><td>2114</td><td>4666</td></tr>
    <tr><td>3245466</td><td>334</td></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

如果我愿意 fe. 按Unique ID搜索，它应该显示唯一 ID 从特定数字开始的唯一行。 如果我在搜索输入框中键入"2"，则以下行应保留，因为它们以2开头：

<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>214215</td><td>442</td></tr>
    <tr><td>2114</td><td>4666</td></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

如果我输入 24 ，那么从24开始应该只有一行可见：

<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

如果你们能给我一些关于如何做这样的事情的提示，我将不胜感激。

谢谢。

我不确定这有多有效，但这有效：

$("#search").on("keyup", function() {
    var value = $(this).val();
    $("table tr").each(function(index) {
        if (index != 0) {
            $row = $(this);
            var id = $row.find("td:first").text();
            if (id.indexOf(value) != 0) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
        }
    });
});​
<小时 />

演示 - 在表格上实时搜索

<小时 />

我确实添加了一些简单的突出显示逻辑，您或未来的用户可能会觉得很方便。

添加一些基本突出显示的方法之一是将em标签包裹在匹配的文本周围，并使用 CSS 将黄色背景应用于匹配的文本，即：( em{ background-color: yellow } (，类似于这样：

// removes highlighting by replacing each em tag within the specified elements with it's content
function removeHighlighting(highlightedElements){
    highlightedElements.each(function(){
        var element = $(this);
        element.replaceWith(element.html());
    })
}
// add highlighting by wrapping the matched text into an em tag, replacing the current elements, html value with it
function addHighlighting(element, textToHighlight){
    var text = element.text();
    var highlightedText = '<em>' + textToHighlight + '</em>';
    var newText = text.replace(textToHighlight, highlightedText);
    
    element.html(newText);
}
$("#search").on("keyup", function() {
    var value = $(this).val();
    
    // remove all highlighted text passing all em tags
    removeHighlighting($("table tr em"));
    $("table tr").each(function(index) {
        if (index !== 0) {
            $row = $(this);
            
            var $tdElement = $row.find("td:first");
            var id = $tdElement.text();
            var matchedIndex = id.indexOf(value);
            
            if (matchedIndex != 0) {
                $row.hide();
            }
            else {
                //highlight matching text, passing element and matched text
                addHighlighting($tdElement, value);
                $row.show();
            }
        }
    });
});
<小时 />

演示 - 应用一些简单的突出显示

这是一个搜索两列的版本。

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();
    $("table tr").each(function (index) {
        if (!index) return;
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

演示：http://jsfiddle.net/rFGWZ/369/

François Wahl 的方法，但更短一些：

$("#search").keyup(function() {
    var value = this.value;
    $("table").find("tr").each(function(index) {
        if (!index) return;
        var id = $(this).find("td").first().text();
        $(this).toggle(id.indexOf(value) !== -1);
    });
});

http://jsfiddle.net/ARTsinn/CgFd9/

这是它的纯Javascript版本，可以实时搜索所有列：

function search_table(){
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("search_field_input");
  filter = input.value.toUpperCase();
  table = document.getElementById("table_id");
  tr = table.getElementsByTagName("tr");
  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td") ; 
    for(j=0 ; j<td.length ; j++)
    {
      let tdata = td[j] ;
      if (tdata) {
        if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break ; 
        } else {
          tr[i].style.display = "none";
        }
      } 
    }
  }
}

我接受了yckart的回答，并：

  • 间隔开以提高可读性
  • 不区分大小写的搜索
  • 比较中有一个错误，已通过添加 .trim(( 修复

(如果你把你的脚本放在jQuery包含下方的页面底部，你不应该需要准备好文档(

j查询：

 <script>
    $(".card-table-search").keyup(function() {
        var value = this.value.toLowerCase().trim();
        $(".card-table").find("tr").each(function(index) {
            var id = $(this).find("td").first().text().toLowerCase().trim();
            $(this).toggle(id.indexOf(value) !== -1);
        });
    });
 </script>

如果你想扩展它，让它迭代每个"td"并进行此比较。

老问题，但我发现如何更快地做到这一点。举个例子：我的表中有大约 10k 个数据，所以我需要一些快速的搜索机器。

这是我所做的：

$('input[name="search"]').on('keyup', function() {
        var input, filter, tr, td, i;
        input  = $(this);
        filter = input.val().toUpperCase();
        tr     = $("table tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0]; // <-- change number if you want other column to search
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    })

希望它对某人有所帮助。

在JS函数下，您可以使用它根据某些指定的列过滤行，请参阅searchColumn数组。它取自 w3 学校，并进行了一些自定义以搜索和过滤给定的列列表。

网页结构

<input style="float: right" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Type in a name">
     <table id ="myTable">
       <thead class="head">
        <tr>
        <th>COL 1</th>
        <th>CoL 2</th>
        <th>COL 3</th>
        <th>COL 4</th>
        <th>COL 5</th>
        <th>COL 6</th>      
        </tr>
    </thead>    
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
     </tr>
    </tbody>
</tbody>


  function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
     var searchColumn=[0,1,3,4]
    for (i = 0; i < tr.length; i++) {
      if($(tr[i]).parent().attr('class')=='head')
        {
            continue;
         }
    var found = false;
      for(var k=0;k<searchColumn.length;k++){
        td = tr[i].getElementsByTagName("td")[searchColumn[k]];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
            found=true;    
          } 
        }
    }
    if(found==true)  {
        tr[i].style.display = "";
    } 
    else{
        tr[i].style.display = "none";
    }
}
}

这个在我的情况下是最好的

https://www.w3schools.com/jquery/jquery_filters.asp

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

以下是您可以使用Ajax，PHP和JQuery执行的操作。希望这有帮助或给你一个开始。检查 php 中的 mysql 查询。它与从第一个开始的模式匹配。

在此处查看现场演示和源代码。

http://purpledesign.in/blog/to-create-a-live-search-like-google/

创建一个搜索框，可能是这样的输入字段。

<input type="text" id="search" autocomplete="off">

现在我们需要监听用户在文本区域键入的任何内容。为此，我们将使用 jquery live(( 和 keyup 事件。在每次键控时，我们都有一个jquery函数"search"，它将运行一个php脚本。

假设我们有这样的 html。我们有一个输入字段和一个列表来显示结果。

 <div class="icon"></div>
 <input type="text" id="search" autocomplete="off">
 <ul id="results"></ul>

我们有一个 Jquery 脚本，它将侦听输入字段上的 keyup 事件，如果它不为空，它将调用 search(( 函数。search(( 函数将运行 php 脚本并使用 AJAX 在同一页面上显示结果。

这是JQuery。

$(document).ready(function() {  
    // Icon Click Focus
    $('div.icon').click(function(){
        $('input#search').focus();
    });
    //Listen for the event
    $("input#search").live("keyup", function(e) {
    // Set Timeout
    clearTimeout($.data(this, 'timer'));
    // Set Search String
    var search_string = $(this).val();
    // Do Search
    if (search_string == '') {
        $("ul#results").fadeOut();
        $('h4#results-text').fadeOut();
    }else{
        $("ul#results").fadeIn();
        $('h4#results-text').fadeIn();
        $(this).data('timer', setTimeout(search, 100));
    };
});

// Live Search
// On Search Submit and Get Results
function search() {
    var query_value = $('input#search').val();
    $('b#search-string').html(query_value);
    if(query_value !== ''){
        $.ajax({
            type: "POST",
            url: "search_st.php",
            data: { query: query_value },
            cache: false,
            success: function(html){
                $("ul#results").html(html);
            }
        });
    }return false;    
}

}(;在 php 中，向 mysql 数据库发送查询。PHP 将返回将使用 AJAX 放入 html 的结果。在这里，结果被放入一个 html 列表中。

假设有一个虚拟数据库，其中包含两个表动物和鸟类，具有两个相似的列名"type"和"desc"。

//search.php
// Credentials
$dbhost = "localhost";
$dbname = "live";
$dbuser = "root";
$dbpass = "";
//  Connection
global $tutorial_db;
$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");
//  Check Connection
if ($tutorial_db->connect_errno) {
    printf("Connect failed: %sn", $tutorial_db->connect_error);
    exit();
$html = '';
$html .= '<li class="result">';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h3>nameString</h3>';
$html .= '<h4>functionString</h4>';
$html .= '</a>';
$html .= '</li>';
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);
// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
    // Build Query
    $query = "SELECT *
        FROM animals
        WHERE type REGEXP '^".$search_string."'
        UNION ALL SELECT *
        FROM birf
        WHERE type REGEXP '^".$search_string."'"
        ;
$result = $tutorial_db->query($query);
    while($results = $result->fetch_array()) {
        $result_array[] = $results;
    }
    // Check If We Have Results
    if (isset($result_array)) {
        foreach ($result_array as $result) {
            // Format Output Strings And Hightlight Matches
            $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']);
            $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']);
        $display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8';
            // Insert Name
            $output = str_replace('nameString', $display_name, $html);
            // Insert Description
            $output = str_replace('functionString', $display_function, $output);
            // Insert URL
            $output = str_replace('urlString', $display_url, $output);

            // Output
            echo($output);
        }
    }else{
        // Format No Results Output
        $output = str_replace('urlString', 'javascript:void(0);', $html);
        $output = str_replace('nameString', '<b>No Results Found.</b>', $output);
        $output = str_replace('functionString', 'Sorry :(', $output);
        // Output
        echo($output);
    }
}

使用 yckart 的答案，我搜索了整个表格 - 所有 td。

$("#search").keyup(function() {
    var value = this.value;
    $("table").find("tr").each(function(index) {
        if (index === 0) return;
        var if_td_has = false; //boolean value to track if td had the entered key
        $(this).find('td').each(function () {
            if_td_has = if_td_has || $(this).text().indexOf(value) !== -1; //Check if td's text matches key and then use OR to check it for all td's
        });
        $(this).toggle(if_td_has);
    });
});

如果行中的任何单元格包含搜索的短语或单词，则此函数将显示该行以其他方式隐藏它。 

    <input type="text" class="search-table"/>  
     $(document).on("keyup",".search-table", function () {
                var value = $(this).val();
                $("table tr").each(function (index) {
                    $row = $(this);
                    $row.show();
                    if (index !== 0 && value) {
                        var found = false;
                        $row.find("td").each(function () {
                            var cell = $(this).text();
                            if (cell.indexOf(value.toLowerCase()) >= 0) {
                                found = true;
                                return;
                            } 
                        });
                        if (found === true) {
                            $row.show();
                        }
                        else {
                            $row.hide();
                        }
                    }
          });
   });

我使用了前面的答案并将它们组合在一起来创建：

通过隐藏行和突出显示来搜索任何列

Css 用于突出显示找到的文本：

em {
   background-color: yellow
}

Js：

function removeHighlighting(highlightedElements) {
   highlightedElements.each(function() {
      var element = $(this);
      element.replaceWith(element.html());
   })
}
function addHighlighting(element, textToHighlight) {
   var text = element.text();
   var highlightedText = '<em>' + textToHighlight + '</em>';
   var newText = text.replace(textToHighlight, highlightedText);
   element.html(newText);
}
$("#search").keyup(function() {
   var value = this.value.toLowerCase().trim();
   removeHighlighting($("table tr em"));
   $("table tr").each(function(index) {
      if (!index) return;
      $(this).find("td").each(function() {
         var id = $(this).text().toLowerCase().trim();
         var matchedIndex = id.indexOf(value);
         if (matchedIndex === 0) {
            addHighlighting($(this), value);
         }
         var not_found = (matchedIndex == -1);
         $(this).closest('tr').toggle(!not_found);
         return not_found;
      });
   });
});

在这里演示

<!--code for table search start--> 
<script>
    $(document).ready(function () {
        $("#myInput").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script><!--code for table search end-->

$("#search").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("tbody tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });

假设有一个带有 tbody 的表。 您也可以使用 Find 进行搜索，或者如果表有 ID，则可以使用 ID

嘿，

对于仍在寻找 2020 年的每个人。我从这里得到了一些答案，并制作了自己的搜索表功能。

function searchTable() {
 var input, filter, table, tr, td, i, txtValue;
 input = document.getElementById("myInput");
 filter = input.value.toUpperCase();
 table = document.getElementById("showTable");
 tr = table.getElementsByTagName("tr");
 th = table.getElementsByTagName("th");
 var tdarray = [];
 var txtValue = [];
 for (i = 0; i < tr.length; i++) {
   for ( j = 0; j < th.length; j++) {
     tdarray[j] = tr[i].getElementsByTagName("td")[j];
   }
   if (tdarray) {
     for (var x = 0; x < tdarray.length; x++) {
       if (typeof tdarray[x] !== "undefined") {
          txtValue[x] = tdarray[x].textContent || tdarray[x].innerText;
          if (txtValue[x].toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
       }
     }
   }
 }
}

<input style="width: 485px;" type="text" id="myInput"  class="search-box" onkeyup="searchTable()" placeholder="Suche..">
  

<table id="showTable">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

这是我的例子

<input class="form-control data-search" type="text" name="employee_quick_search" data-table=".employee-table" placeholder="Kiirotsing" value="see">
<table class="employee-table">

$("tbody tr", 'table.search-table').filter(function (index) {
//IF needed to show some rows
/*
            if (index == 0 || index == 1)
                return;
*/
            var inputValueFound = false;
//input search
            $('input,textarea,select', this).each(function(){
                if( $(this).val().toLowerCase().indexOf(value) > -1 )
                    inputValueFound = true;
            });
//text search
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1 || inputValueFound);
        });

在这里你可以使用这个JQuery代码。我个人正在使用此代码。

$("#ticket-search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#ticket-table tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

我尝试使用以下示例。 但我没有找到第一条记录。 所以在我的搜索代码工作后尝试更改一些代码。

$("#serachname").on("keyup", function () {
     
    var value = $(this).val();
    $(".search-keyword").each(function (index) {
       
            $row = $(this);
            var id = $row.find("th").text().trim();
            if (id.indexOf(value) == -1) {
                $row.hide();
            }
            else {
                $row.show();
            }
        
    });
});

示例 => https://codepen.io/hardik-solgama/pen/vYdrWMj

您可以在表格中进行实时搜索。下面是在搜索框中搜索任何键以在表中查找输出的示例。

$("#serachname").on("keyup", function () {
  var value = $(this).val();
  $(".search-keyword").each(function (index) {
    $row = $(this);
    var id = $row.find("th").text().trim();
    if (id.indexOf(value) == -1) {
      $row.hide();
    } else {
      $row.show();
    }
  });
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group mx-sm-3 mt-3">
  <input type="text" class="form-control" id="serachname" placeholder="Search ">
</div>
<table class="table mt-3">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="search-keyword">
      <th scope="row">1</th>
      <th>T1</th>
      <th>P1</th>
      <th>V1</th>
    </tr>
    <tr class="search-keyword">
      <th scope="row">2</th>
      <th>T2</th>
      <th>P2</th>
      <th>V2</th>
    </tr>
    <tr class="search-keyword">
      <th scope="row">3</th>
      <th>T3</th>
      <th>P3</th> 
      <th>V3</th>
    </tr>
  </tbody>
</table>

代码脚本

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

.html：

<input id="myInput" type="text" placeholder="Search..">

以下是我实时搜索 html 表的方式：

... 
function filterTo(input, table) {
var tr = document.getElementById(table).getElementsByTagName('tr');
for (var i = 1; i < tr.length; i++) {
    var td = tr[i].getElementsByTagName('td');
    var hide = true;
    for (var j=0; j<td.length; j++) { 
        if (td[j].innerHTML.toUpperCase().indexOf(input.toUpperCase()) > -1) { hide=false; break } 
    }
    tr[i].style.display = hide ? 'none' : '';
} }

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium