I am trying to search through a JSON file and display only the result matching the input form.

When I click the 'Search' button, nothing happens.

How can I resolve this?

This is the code:

<div id="search">
                    <form name="input" action="search()" method="get">
                        Search: <input id = "searchField" type="text" name="search">
                        <input type="button" value="Search" onClick="search()">
                    </form>

                    <script>
                        function search(){
                            strToSearch = $('#searchField').val();
                            alert(strToSearch);
                            $.getJSON('products.json', function(data) {
                                $.each(data.Products, function(i, item) {
                                    if (item.Name == strToSearch) {
                                        alert('Product found');
                                        $(".products").append(
                                                "<table class='productTable'>"+
                                                "<tr><td><img "+ "src='"          +item.Source+"'/>        </td></tr>"+
                                                "<tr><td>Name: "+                 item.Name +         "</td></tr>"+
                                                "<tr><td>Album: "+                    item.Album +            "</td></tr>"+
                                                "<tr><td>Label: "+                    item.Label +            "</td></tr>"+
                                                "<tr><td>Genre: "+                    item.Genre +            "</td></tr>"+
                                                "<tr><td>Price: <u>"+              item.Price +            "</u></td></tr>"+
                                                "<tr><td>Quantity: <u>"+           item.Quantity +         "</u></td></tr>"+
                                                "<tr><td>Tracks: "+                   item.Tracks +       "</td></tr><br /><br />"+
                                                "</table>"
                                        );
                                    }

                                });
                            });
                        }

                    </script>


                <div class="products">

                </div>

Please put comments to your code for us to understand it better ..

are there any errors in your console?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.