I'm trying to search JSON file using JQuery code and the results are not displaying.
Here is my code:
$(document).ready(function() {
$.getJSON('subjects.json', function(data) {
$("#searchInput2").keyup(function () {
var searchField = $(this).val();
if (searchField === "") {
$("#searchdisplay").html("");
return;
}
var regex = new RegExp(searchField, "i");
var output = '<div class="row">';
$.each(data, function (key, val) {
if (val.name.search(regex) != -1) {
output += '<div">';
output +=
'<div class="form-group"><a class="dropdown-item">' +
val.name +
"</a></div>";
}
});
output += "</div>";
$("#searchdisplay").html(output);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<input type="search"
class="form-control"
name="searchInput2"
id="searchInput2"
/>
</div>
<div class="searchdisplay">
Here is my JSON file:
{
"Subjects": [
{
"name": "Programim 1",
"Code": "01",
"Semester": "1",
"Type": ["Mandatory","Elective"],
"Professor": "Profesor 1",
"Credits": "7",
"Grade": "9",
"Keywords": ["css","js","jquery","php"],
"Lecture": ["lecture","practical"]
},
{
"name": "Java programim",
"Code": "02",
"Semester": "2",
"Type": ["Mandatory","Elective"],
"Professor": "Profesor2",
"Credits": "6",
"Grade": "9",
"Keywords": ["css","js","jquery","php"],
"Lecture": ["lecture","practical"]
},
{
"name": "Programim 3 ",
"Code": "03",
"Semester": "7",
"Type": ["Mandatory","Elective"],
"Professor": "Profesor 3",
"Credits": "6",
"Grade": "7",
"Keywords": ["css","js","jquery","php"],
"Lecture": ["lecture","practical"]
},
{
"name": "Computer architecture",
"Code": "04",
"Semester": "2",
"Type": ["Mandatory","Elective"],
"Professor": "Profesor 4",
"Credits": "4",
"Grade": "6",
"Keywords": ["css","js","jquery","php"],
"Lecture": ["lecture","practical"]
},
{
"name": "Web Design",
"Code": "05",
"Semester": "4",
"Type": ["Mandatory","Elective"],
"Professor": "Profesor 5",
"Credits": "4",
"Grade": "7",
"Keywords": ["css","js","jquery","php"],
"Lecture": ["lecture","practical"]
}
]
}
I want to display all the information of the subject when I search the subjects name so what changes in the code I need to make for it to work properly. Do I need to approach the search method differently or can I use my existing code with some changes.