JQuery dynamic search results not working

Question

I am new to JQuery and I am trying to make a search box. When I type in the search box it doesn't do anything and I don't know why. Any help would be appreciated. Here is my code:

<!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>

this has not very much to do with php – steven Jul 03 '13 at 05:46 — steven, Jul 03 '13 at 05:46

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

This is working code I have tried it in Fiddle and it works

Try to search 25x in input box you will find the output.

Updated

May be there are some zero-width spaces between your code, I check and I got Error in your code like,

Uncaught SyntaxError: Unexpected token ILLEGAL

Reference Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL

And if you rewrite above code like,

$(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();
        }
    });
})

Then I found it works

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 03 '13 at 05:51

Rohan Kumar

40,431
11
76
106

I also tried it in Fiddle and it works perfectly. When I try it in Chrome or IE, it doesn't do anything :( – Oliver Jul 03 '13 at 05:53
If you copy paste my entire exact code, it works in Chrome?! That is strange! – Oliver Jul 03 '13 at 06:56
@Oliver Check the above I have made changes in it. – Rohan Kumar Jul 03 '13 at 07:10
Everything works now, even with my old code. I made a google search of the error and apparently it's just a random bug. I just erased the last line of the JQuery code and typed it again and it works. Thanks a lot for your time! – Oliver Jul 03 '13 at 07:30

JQuery dynamic search results not working

1 Answers1