javascript - 键入时搜索并显示表值

标签 javascript html css

我从堆栈溢出本身引用了以下代码。但它不起作用,任何人都可以告诉我应该更新这段代码。

var $rows = $('#table tr');
    $('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
    });
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<html>
   <head>
    <title>Search Event</title>  
    <script type="text/javascript" src="search.js"></script>
    <link href="search.css" rel="stylesheet" type="text/css"> 
   </head>
   <body>
     <center><input type="text" id="search" placeholder="Type to search"></center>
     <center><table id="table">
      <tr>
        <td>Apple</td>
        <td>Green</td>
     </tr>
     <tr>
       <td>Grapes</td>
       <td>Green</td>
    </tr>
    <tr>
       <td>Orange</td>
       <td>Orange</td>
    </tr>
    </table></center>
   </body>
 </html>

到目前为止,这些简单的概念都在挣扎。所以请帮助我。

最佳答案

If i type ap or apple means the correspondent values only should display other than should hide

请注意,不确定预期结果是否是切换 td 元素?由于问题中的 js 似乎切换 tr 元素?要切换文本输入与 td 文本匹配的 td 元素,请尝试在调用 .show( ) 将过滤 td 元素替换为父 tr 元素

如果只输入“app”td 包含文本“Apple”应该显示

var $rows = $('#table tr');
    $('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.find("td").show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
    });
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<html>
   <head>
    <title>Search Event</title>  
    <script type="text/javascript" src="search.js"></script>
    <link href="search.css" rel="stylesheet" type="text/css"> 
   </head>
   <body>
     <center><input type="text" id="search" placeholder="Type to search"></center>
     <center><table id="table">
      <tr>
        <td>Apple</td>
        <td>Green</td>
     </tr>
     <tr>
       <td>Grapes</td>
       <td>Green</td>
    </tr>
    <tr>
       <td>Orange</td>
       <td>Orange</td>
    </tr>
    </table></center>
   </body>
 </html>

关于javascript - 键入时搜索并显示表值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33386408/

相关文章:

javascript - 更改类名时 CSS 不会更改

javascript - JQuery 将输入掩码应用于字段 onfocus 并删除 onblur 以避免占位符文本出现问题

javascript - 正则表达式仅接受字母数字,中间的一个连字符除外

javascript - 调用 Javascript 函数后的括号是做什么用的?

html - 缩小屏幕尺寸时保持边距?

jquery - 具有非嵌套元素的悬停导航菜单

html - Bootstrap 4——如何在溢出的列之间添加空间

javascript - 为什么在 addEventListener 回调中调用 removeEventListener?

javascript - 确保异步脚本的回调

html - 对 div 标签内的 span 元素应用边距和在 div 标签内应用边距有什么区别?