【问题标题】:JQuery dynamic search results not workingJQuery动态搜索结果不起作用
【发布时间】:2013-07-03 05:41:39
【问题描述】:

我是 JQuery 的新手,我正在尝试制作一个搜索框。当我在搜索框中输入时,它什么也没做,我也不知道为什么。任何帮助,将不胜感激。这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search Test</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
    var $cells = $("td");

$("#search").keyup(function() {
    var val = $.trim(this.value).toUpperCase();
    if (val === "")
        $cells.parent().show();
    else {
        $cells.parent().hide();
        $cells.filter(function() {
            return -1 != $(this).text().toUpperCase().indexOf(val); }).parent().show();
    }
});
});​
</script>
<form action="" method="post">
<label for="search">Search</label>
<input type="text" name="search" id="search" class="inputfield" />
</form>
<table border="0" align="left">
    <tr><td>Gripper 25x8-12 GR25812</td></tr>
    <tr><td>Gripper 25x10-12 GR251012</td></tr>
    <tr><td>Gripper 26x9-12 GR26912</td></tr>
    <tr><td>Gripper 26x12-12 GR261212</td></tr>
</table>
</body>
</html>

【问题讨论】:

  • 这个和php关系不大

标签: javascript php jquery search


【解决方案1】:

这是我在Fiddle 中尝试过的工作代码,它可以工作

尝试在input box 中搜索25x 你会找到输出。

更新

您的代码之间可能存在一些零宽度空格, 我检查了一下,我在您的代码中得到了Error,例如,

Uncaught SyntaxError: Unexpected token ILLEGAL

参考Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL

如果你重写上面的代码,

$(function(){
    var $cells = $("td");
    $("#search").keyup(function() {
        var val = $.trim($(this).val()).toUpperCase();
        if (val === "")
            $cells.parent().show();
        else {
            $cells.parent().hide();
            $cells.filter(function() {return -1 != $(this).text().toUpperCase().indexOf(val);}).parent().show();
        }
    });
})

然后我发现它有效

【讨论】:

  • 我也在 Fiddle 中试过,效果很好。当我在 Chrome 或 IE 中尝试时,它什么也没做:(
  • 如果您复制粘贴我的整个确切代码,它可以在 Chrome 中使用吗?!这很奇怪!
  • @Oliver 检查上面我已经在里面做了修改。
  • 现在一切正常,即使使用我的旧代码。我对错误进行了谷歌搜索,显然这只是一个随机错误。我刚刚删除了 JQuery 代码的最后一行,然后再次输入它就可以了。非常感谢您的宝贵时间!
猜你喜欢
  • 1970-01-01
  • 2017-03-03
  • 2015-10-12
  • 2023-03-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多