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>