键入时搜索并显示表值

Question

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

 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>

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

Answer 1

代码无法正常工作，因为您的“search.js”文件需要jquery

在你的代码Jquery文件缺少jquery它工作正常它必须

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">

检查这个小提琴

Answer 2

如果我键入ap或apple意味着对应的值只应显示除隐藏之外的值

注意，不确定预期结果是否切换td元素？ 正如问题中的js似乎切换tr元素？ 要切换文本输入与td文本匹配的td元素，请在调用.show()之前尝试添加.find("td") .show()以替换父tr元素的过滤td元素

如果输入“app”仅显示包含文本“Apple”的td

 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>

Answer 3

在html中添加了jquery-1.9.1.js ..

<head>
<title>Search Event</title>  
<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link href="search.css" rel="stylesheet" type="text/css"> 
</head>

小提琴

键入时搜索并显示表值

问题描述

3 个解决方案

解决方案1
0 2015-10-28 08:50:24

解决方案2
0 已采纳 2015-10-28 10:02:17

解决方案3
-1 2015-10-28 08:53:58

键入时搜索并显示表值

问题描述

3 个解决方案

解决方案1 0 2015-10-28 08:50:24

解决方案2 0 已采纳 2015-10-28 10:02:17

解决方案3 -1 2015-10-28 08:53:58

解决方案1
0 2015-10-28 08:50:24

解决方案2
0 已采纳 2015-10-28 10:02:17

解决方案3
-1 2015-10-28 08:53:58